javascript - D3--如何迭代颜色数组

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)来迭代数组颜色，但没有成功。完全披露:上面的代码是为一个类(class)创建的，但这个特定问题不是作业的一部分。我正在尝试稍微超出任务范围。

Answer 1

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

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

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

但是，从结果来看，第一个条形最高，但数据值最小。所有条形的高度均为 500 像素，每个条形都有一部分位于 SVG 边缘下方。

我想我只想指出您的代码的一些潜在改进:

仅当获取数据数组中的当前元素 (d) 或当前增量 (我)，所以对于:

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

但是，我怀疑您希望所有项目的高度均为 500 像素(特别是当您的 svg 只有 400 像素高时)。如果您有利润，这一点将尤其明显。

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

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

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

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

这给你:

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");

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

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

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