Javascript d3.js中解析x属性时出现意外值无穷大_Javascript_Csv_D3.js_Svg_Dimple.js

Javascript d3.js中解析x属性时出现意外值无穷大

javascript csv d3.js svg

Javascript d3.js中解析x属性时出现意外值无穷大,javascript,csv,d3.js,svg,dimple.js,Javascript,Csv,D3.js,Svg,Dimple.js,我尝试使用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 creat

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

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

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

检查plunker：




d3.csv（“数据/生存率.csv”），功能（d）{
d[‘生存率’]=数学四舍五入（d[‘生存率’）；
如果（d['Sex']=='male'）{
返回d；
}
}，抽签）；
函数图（数据）{
var svg=d3。选择（“chartContainer1”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，1200）
.append（'g'）
.attr（“类别”、“图表”）；
控制台.表格（数据）；
var myChart1=新的dimple.chart（svg，数据）；
我的图表1.挫折（60,30,510,330）
myChart1.addCategoryAxis（“x”、“Pclass”）；
myChart1.addMeasureAxis（“y”，“存活率”）；
myChart1.addSeries（空、酒窝、绘图、条形）；
myChart1.addLegend（65,10,510,20，“右”）；
myChart1.draw（）；
}

您确定过滤后的数据正在向回调传递任何信息吗？请将PClass更改为SexYes，因为console.table（data）位于回调函数中，它会根据需要返回数据集it@MMK我已经这样做了，它返回相同的结果error@HichamZouarhi用你的数据

<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>