Question

我无法返回数组长度。我有一个数组如下：

var colorsquares = [
                [3.3, 28, -1.5, 13, 857, 3, 5, 6, 7, 5, ["#b2dbbb","#d2e6c1"]],
                [1.3, 18, -1.5, 13, 857, 3, 5, 6, 7, 5, ["#c2dccc","#d2fdc1"]]
                ];

我正在使用最后的值为divs

着色

d3.select("#colorBox")
          .selectAll("div")
          .data(d[10])
          .enter()
          .append("div")
          .style("background-color", function(d) { 
               return d; 
           })
           .style("width", function(d) { 
               return (d.length + 1) + "px"; 
           })
           ;

颜色正确，但我没有得到我想要的宽度。而不是2，我得到8.

Answer 1

在D3造型功能中：

.style("width", function(d) { 
    return (d.length + 1) + "px"; 
})

，第一个参数（您称之为d）表示单个数组元素，例如"#b2dbbb"或"#d2e6c1"。 D3将第一个数组元素（"#b2dbbb"）传递给第一个div，第二个（"#d2e6c1"）传递给第二个div，依此类推。因此，当您要求d.length + 1时，您要求的是字符串"#b2dbbb" + 1的长度，实际上是8。

我认为您的混淆是因为您将名称d用于两个不同的目的，一个隐藏另一个目的。你将它用作函数中的参数，但也作为对colorsquares[0]或colorsquares[1]的引用（这些在某种循环中是什么？我不能更具体，因为你还没有发布了所有代码。）

例如，更改OUTER d（当您说.data(d[10])时所指的那个）被称为dd（或者更好的名称，理想情况下）。然后，在背景颜色功能中，您可以说

return d

但是在宽度函数中，我认为您正在寻找

return (dd[10].length + 1) + "px";

使用d3获取数组长度

1 个答案: