0

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

起初，我通过使用包含数据的数组来实现可视化：

var 数据集 = [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 数据文件来做同样的事情。它看起来像这样：

2008
1
1
1
1
2
3
4

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

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

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

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

为什么会这样？我是否以错误的方式插入 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;});

  })
4

1 回答 1

0

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

csv.forEach(function(d) { return +d; });
于 2013-08-10T14:02:11.090 回答