gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 16:08:51 25 4
gpt4 key购买 nike

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

最佳答案

检查骗子: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>

关于javascript - d3.js 中解析 x 属性时出现意外值无穷大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41676033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com