Question

我尝试使用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

Answer 1

检查plunker：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>

Answer 2

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

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

意外值无穷大解析d3.js中的x属性

2 个答案: