Question

我正在尝试将文本（mydata.txt）文件加载到d3.js. mydata.txt看起来像这样

姓名，年龄，玛丽亚，30岁，弗雷德，50岁，弗朗西斯，12岁

我使用了以下代码但是我在控制台上遇到了这个错误：＆＃34;意外的值NaN解析宽度属性。＆＃34;

<script>
    //d3.txt("mydata.txt", function(data) {
    d3.csv("mydata.txt", function(data) {

    var canvas = d3.select("body")
                    .append("svg")
                    .attr("width",500)
                    .attr("height",500)

            canvas.selectAll("rect")
                    .data(data)
                    .enter()
                        .append("rect")
                        .attr("width",function(d){return d.age*10;})
                        .attr("height",48)
                        .attr("y",function(d,i){return i*50;})
                        .attr("fill", "blue");


})  
</script>

Answer 1

可能的原因是d.age*10。将非数字字符串或undefined相乘会产生NaN。尝试将.each(function(d){console.log(d)})投放到append下方的链中，看看是否符合预期。

您还可以尝试记录整个data并查看它是什么。

我还建议您使用.csv而不是.txt。除了最佳实践之外，由于这一点，可能会发生一些奇怪的事情。

如何将txt文件加载到D3.JS中

1 个答案: