D3.js ~ размещение прямоугольников с петлей и их раскраска

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

Главное, следует отметить, что если вы можете передать атрибут функцию, которая принимает объект и индекс в качестве аргументов, которые будут затем применены к каждой системе координат. Используя этот подход, я получаю это: