D3.js~用for循环放置矩形并着色它们

Question

我需要为散点图设置颜色图例。 我已经设置了刻度并且它正在处理散点图中的点，但是我现在要做的是为每种颜色绘制一个小方块，用颜色本身填充，以显示图表的图例。 在我的图表开头的这样的事情：

我尝试设置相应绘制它们的功能但失败了，这就是我尝试过的：

var colore = d3.scale.ordinal()
    .domain(d3.extent(dataset, function (d) { return d.Peso; }))
    .range(["#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]);

和绘制正方形的函数：

svg.selectAll("rect")
    .data(colore.range())
    .enter()
    .append("rect")
    .attr("fill", function (i) { return colore(i); })
    .attr("x", function (i) {for (i=1; i <= colore.range().length; i++) 
        { return (i * 12) + "px"; }
        })
    .attr("y", margin - 8 + "px")
    .attr("width", 8 + "px")
    .attr("height", 8 + "px");

这会将svg元素追加到8个正方形，但相互堆叠，就像这样（红色的）：

所以我不知道如何纠正我的功能，我认为这是错误发生的地方。在此先感谢您的帮助！

Answer 1

问题是你没有使用绑定到每个矩形的data，而是每次都循环遍历所有颜色。尝试这样的事情：

svg.selectAll("rect")
    .data(colore.range()).enter()
    .append("rect")
    .attr("fill", function (color){ return color; })
    .attr("x", function (color, index){ return (index * 12) + "px"; })
    .attr("y", margin - 8 + "px")
    .attr("width", 8 + "px")
    .attr("height", 8 + "px");

需要注意的关键是，如果您可以传递一个属性，该函数将Object和索引作为参数，然后将其应用于每个数据。使用这种方法，我得到了这个：