d3.js中的意外值Infinity解析x属性答案

【问题标题】：Unexpected value Infinity parsing x attribute in d3.jsd3.js中的意外值Infinity解析x属性
【发布时间】：2017-05-31 06:29:36
【问题描述】：

我尝试使用 d3.js 从 csv 文件中绘制数据，为此我加载数据并在 d3.csv 调用中对其进行过滤：

d3.csv("data/survival-rates.csv", function(d){
    d['Survival Rate']=Math.round(d['Survival Rate']);
    if(d['Sex']=='male'){
        return d;
    }
}, draw);//draw is the callback function to create the svg element

现在，在用作回调的 draw 函数中，我创建了一个 SVG 元素并将其附加到我之前创建的 div 中：

//inside the function draw(data){...
var svg = d3.select("#myChart1")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class','chart');

        console.table(data);

        var myChart1 = new dimple.chart(svg, data);
        myChart1.addCategoryAxis("x", "Pclass"); 
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.draw();

这里出现错误：

Unexpected value Infinity parsing x attribute.

即使console.table(data) 在数据集中没有显示 NaN 值。

我找了这个错误，没有发现任何东西，提前谢谢

编辑

这是我正在处理的数据的结构：

Pclass,Sex,Survival Rate
1,female,96.8085106383
1,male,36.8852459016
2,female,92.1052631579
2,male,15.7407407407
3,female,50.0
3,male,13.5446685879

【问题讨论】：

您确定您的过滤数据将任何内容传递给您的回调？
将 PClass 更改为 Sex
是的，因为 console.table(data) 在回调函数中，它会返回我想要的数据集
@MMK 我已经这样做了，它返回相同的错误
@HichamZouarhi 和你的数据embed.plnkr.co/4LpFsYvslZJr1d2yeJ5w

标签： javascript csv d3.js svg dimple.js

【解决方案1】：

问题是我在代码中忘记了将系列添加到图表中的一行，这是导致该错误的原因：

myChart.addSeries(null, dimple.plot.bar);

【讨论】：

【解决方案2】：

检查插件：plunker

<head>
  <script data-require="d3@3.4.6" data-semver="3.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>
  <script data-require="dimplejs@*" data-semver="2.1.2" src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
</head>

<body>
<br>
<div id="chartContainer1">
    <script>
      d3.csv("data/survivals-rates.csv", function(d) {
        d['Survival Rate'] = Math.round(d['Survival Rate']);
        if (d['Sex'] == 'male') {
          return d;
        }
      }, draw);

  function draw(data) {
        var svg = d3.select("#chartContainer1")
          .append("svg")
          .attr("width", 400)
          .attr("height", 1200)
          .append('g')
          .attr('class', 'chart');
        console.table(data);
        var myChart1 = new dimple.chart(svg, data);
        myChart1.setBounds(60, 30, 510, 330)
        myChart1.addCategoryAxis("x", "Pclass");
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.addSeries(null, dimple.plot.bar);
        myChart1.addLegend(65, 10, 510, 20, "right");
        myChart1.draw();
      }
    </script>

  </div>
</body>

</html>

【讨论】：