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

Question

我需要为散点图设置颜色图例。我已经设置了比例尺，它正在处理散点图中的点，但是我现在想做的是为每种颜色绘制一个小方 block ，填充颜色本身，以显示图表的图例。在我的图表的开头是这样的:

我尝试设置函数来相应地绘制它们但失败了，这是我尝试过的:

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 个正方形，但彼此堆叠在一起，就像这样(红色的):

所以我不知道如何更正我的 for 函数，我认为这是错误发生的地方。在此先感谢您的帮助!

Answer 1

问题是您没有使用绑定(bind)到每个矩形的 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");

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