C3 : 选择 csv 列输入答案

【问题标题】：C3 : selecting csv column inputC3 : 选择 csv 列输入
【发布时间】：2017-01-17 21:23:54
【问题描述】：

如何从包含 1200 行和 13 列的 csv 数据文件中选择将在 C3.js 中绘制图形的列。附录：我已经编辑了文件并进行了更改。该文件有效。所有问题都解决了。对于一般信息，我从 JSFiddle 页面的副本中检索了基本文档。显然，每个 JSFiddle 页面源代码都包含指向 JSFiddle 上代码的两个（离线）功能副本的链接。 JSFiddle 页面中编写的代码无法离线工作。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="./resources/d3.v3.min.js"></script>
<script type="text/javascript" src="./resources/c3.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/c3.css">
<style type="text/css"></style>
<title>once again</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
d3.csv("./data/dataXY_11-21-2016.csv")
    .row(function(d) { return [d.time12, d.PVpower, d.Elevation]; })
    .get(function(error,rows) { 
        rows.unshift (["time 12", "PV array power(W)", "Elevation"])
        console.log(rows); 
      var chart = c3.generate({
        size:{
        width: 1000,
        height: 400
        },
    bindto: '#chart',
          data: {
              rows: rows,
              type: 'line',
                x: 'time 12',
                xFormat:'%I:%M:%S %p'
          },
            point: {show: false},
            tooltip: {show: false},
        axis: {
            x: {
                localtime: true,
                type:'timeseries',
                tick:{
                    //culling:{max: 50},
                    fit: true,
                    count: 50,
                    format: '%I:%M:%S %p',
                    rotate: 65,         
                      }//end tick
                },//end x

            y: {
                max: 350,
                min: 0
                } //end y
            },//end axis

        grid:{
            x:{
                show: true
            },//end x
            y:{
                show: true
              }//end y
            }//end grid
      });
});
}//]]> 
</script>
<body>
  <div id="chart"></div>
<script>
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>
</body>
</html>

【问题讨论】：

看这里的问题 --> stackoverflow.com/questions/26521945/… 。基本上，您必须首先在生成 c3 图表之外过滤 csv。然后在 c3 图表生成函数中使用过滤后的数据。
从脚本中可以看出，我采用了解决方案 #2，但它并没有按原样工作。
但是您正在尝试在 c3 generate 函数中进行 csv 过滤。它需要在此之外完成。
我已经修改了脚本以进行其他更改，如上所示。我还在生成脚本之前和之后将过滤器插入到它自己的脚本中。不去。我在生成函数之前和之后将过滤器插入到与生成函数相同的脚本中。不行。
哦，'columns'函数也没有效果。

标签： c3.js

【解决方案1】：

看看我在 jsfiddle 上搞砸的这个例子（代码如下）

http://jsfiddle.net/Lpatkpj1/

我加载了 csv，.row 函数然后将每一行过滤成新格式（数组而不是对象），途中只挑选两列，然后全部返回 .get(csv示例只是在网络上很方便的一个）。然后我使用 unshift 将数据的名称添加到行数组的前面。然后，一个非常小的 c3.generate 可以使用 rows: 选项显示此信息，您可以添加任何其他内容。

d3.csv("https://raw.githubusercontent.com/stedy/Machine-Learning-with-R-datasets/master/usedcars.csv")
    .row(function(d) { return [d.price, d.mileage]; })
    .get(function(error, rows) { 
        rows.unshift (["Price", "Mileage"])

        var chart = c3.generate({
          data: {
              rows: rows,
              type: 'line'
          },
        });
});

“从那以后，我发现 d3.csv 是 d3 发行版中的一个单独文件” - 可以，但您可以将 d3.js 全部捆绑在一起，包括 csv 功能。请记住，c3 目前不适用于 d3 的 v4，仅适用于 v3 - https://github.com/c3js/c3/issues/1648。

【讨论】：

我开始使用脚本。这些是我的结果：d3.v3：没有错误，没有列数组 d3.v4：c3 类别的错误，但添加了列 Uncaught TypeError: Cannot read property 'category10' of c3.js.5783 at stacktest.html:15 at Object. (d3.v4.min.js:7) at d.call (d3.v4.min.js:4) at XMLHttpRequest.e (d3.v4.min.js:6)
当我将 JSFiddle 中编写的脚本放入 HTML 文件中时，添加 doctype、script t 和源，是否应该绘制数据？ JSFiddle 中是否有未显示的内容？如果你还没有弄清楚，我对 d3 和 c3 还比较陌生，而且几年来没有大量工作在 javascript 中。
d3.v4 不适用于 c3 句号，因此您需要 d3.v3。上面发布的示例小提琴将使用 c3.generate 语法中的 'rows' 选项而不是 'columns'。要让它与您的数据一起使用，您只需更改包含的标题。
我的文档工作正常。代码功能齐全。