Question

我在d3.js中使用csv文件时遇到问题

首先，我通过使用包含数据的数组来获取可视化：

var dataset = [1,1,1,1,1,1,1,2,3,4]

根据数字的不同，矩形会有不同的颜色。我通过使用以下代码行来完成此操作：

.style("fill", function(d) {        
if      (d==1)  {return "black"}  
else if (d==2)  {return "red"} 
else if (d==3)  {return "yellow"} 
else if (d==4)  {return "green"} 
else            {return "purple"}             
;})

因为我想让我的代码更灵活，我想使用csv-datafile做同样的事情。它看起来像这样：

我将其包含在以下代码行中：

d3.csv("landtag.csv", function(d) {
}

但是，它不起作用：所有矩形都是紫色的，因此选择了“其他”。

圈数取决于数据长度 - 这是有效的！

为什么会这样？我是否以错误的方式插入csv文件？

我在教程中尝试了一些解决方案，但都没有用。

感谢您的帮助！

我的完整代码：

// Width and height
    var w = 1000;
    var h = 1000;

    // create svg variable
    var svg = d3.select("p")
        .append("svg")
        .attr("id", "sitze") ;       

    var sitze; 

    d3.csv("landtag.csv", function(d) {


    // create variable
    var rect = svg.selectAll("rect")
        .data(d["2008"])
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 50)
        .attr("height", 50)

        //Bar width depending on number of datapoints in array 
        .attr("x", function(d, i) {
            return i * (w / d.length);  
            })

        // if for different colors
        .style("fill", function(d) {        
            if      (d=="1")    {return "black"}  
            else if (d=="2")    {return "red"} 
            else if (d=="3")    {return "yellow"} 
            else if (d=="4")    {return "green"} 
            else            {return "purple"}             
        ;}) 

        // paddings
        .attr("x", function(d, i) {return (i % 17) * 55;}) 
    .attr("y", function(d, i) {return Math.floor(i / 17) * 55;});

  })

Answer 1

CSV文件的内容将被解析为字符串。这意味着您没有获得数字1，而是字符串“1”。如果您将所有比较更改为字符串（例如(d=="1")），它应该再次有效。或者，您可以在处理字符串之前将字符串转换为数字，例如使用此代码。

csv.forEach(function(d) { return +d; });

代码适用于数组，但不适用于d3.js中的csv文件。为什么？

1 个答案: