Question

我是一名非常初学的程序员（非常重视）。我试图弄清楚如何迭代一系列颜色，以便制作三个不同颜色的矩形。到目前为止，这是我的代码：

var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];

var svg = d3.select("body").append("svg")
    .attr("width","2000").attr("height","400");

svg.selectAll("rect")
        .data(dataArray)
        .enter()
        .append("rect")
        .attr("fill", function(d, i) { return colors*i}) //the line of code in question
        .attr("x", function(d,i) { return 70*i + 50; })
        .attr("y", function(d,i) { return d*15; })
        .attr("height", function(d,i) { return 500; })
        .attr("width", "50");
//code end

正如您所看到的，我一直在尝试使用function(d, i)迭代数组颜色，但未成功。完全披露：上面的代码是为一个类创建的，但是这个特定的问题不是赋值的一部分。我试图超越任务。

Answer 1

另一个答案是对的，颜色[i]会给你你的颜色，所以它值得勾选。该答案中的修复将为您提供：

＆＃13;

var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];

var svg = d3.select("body").append("svg")
    .attr("width","2000").attr("height","400");

svg.selectAll("rect")
        .data(dataArray)
        .enter()
        .append("rect")
        .attr("fill", function(d, i) { return colors[i]})
        .attr("x", function(d,i) { return 70*i + 50; })
        .attr("y", function(d,i) { return d*15; })
        .attr("height", function(d,i) { return 500; })
        .attr("width", "50");
//code end

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

＆＃13;

但是，看看结果，第一个栏是最高的，但具有最小的数据值。所有条都高500像素，每条都有一个低于SVG边缘的部分。

我想我只是指出了一些代码的潜在改进：

只有在抓取数据数组中的当前元素（function(d,i)）或当前增量（d）时才需要使用i，因此：

.attr("height", function(d,i) { return 500; })您可以使用：.attr('height',500);

但是，我怀疑你想要所有物品都是500像素高（特别是因为你的svg只有400像素高）。如果你有利润，这将特别明显。

因此，对于高度，我们可以使用您当前用于y坐标的公式：

.attr("height", function(d,i) { return d*15; })

现在，我们必须通过操纵每个矩形顶部的位置使条形结束在同一点：（从svg底部向上d * 15像素（在400处），在svg坐标空间0在顶部）：

.attr("y", function(d,i) { return 400 - d*15; })

这给了你：

＆＃13;

var dataArray = [5, 11, 18];
var colors = ["red", "green", "black"];

var svg = d3.select("body").append("svg")
    .attr("width","2000").attr("height","400");

svg.selectAll("rect")
        .data(dataArray)
        .enter()
        .append("rect")
        .attr("fill", function(d, i) { return colors[i]}) 
        .attr("x", function(d,i) { return 70*i + 50; }) 
        .attr("y", function(d,i) { return 400-d*15; })
        .attr("height", function(d,i) { return d*15; })
        .attr("width", "50");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

＆＃13;

最后，引号包含字符串，但如果您使用数字，则可以删除它们：

这：.attr("width", "50");可以是.attr("width",50);

Answer 2

您是否尝试过使用colors[i]代替colors*i？这将允许您访问i中的值。（颜色[1]将为“绿色”，颜色[0]将为“红色”等）

D3 - 如何遍历一系列颜色

2 个答案: