javascript - 如何向 enter.append 中使用的 d3 数据集添加新元素？

Question

我有以下只有文本和颜色信息的数据集

var inputs = [{"text": "inleaf1", "col": "red"}, {"text": "inleaf2", "col": "blue"}, {"text": "inleaf3", "col": "green"}];

下面是用来绘制带有文本元素的矩形

            var inputleaf = container.selectAll("rect")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "input-leaf")
                    .attr("width", elementwidth)
                    .attr("height", elementheight)
                    .attr("x", startX)
                    .attr("y", function (d, i) {
                        return startY + ((elementheight + verticalmargin) * i);
                    })
                    .attr("stroke-width", "2")
                    .attr("fill", "none")
                    .attr("stroke", function (d) {
                        return d.col;
                    })
                    .call(function (d) {
                       //--------------------add position details to the data set
                    });

            var inputtext = container.selectAll("text")
                    .data(data)
                    .enter().append("text")
                    .attr("x", startX + elementwidth / 10)
                    .attr("y", function (d, i) {
                        return startY + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                    })
                    .text(function (d) {
                        return d.text;
                    });

在迭代过程中，如何向数据集添加更多属性，例如职位详情。基本上我想更新数据集。

Answer 1

这是一种解决方案，也许不是最好的解决方案:在设置 attr 时更新数据。例如:

.attr("y", function (d, i) {
      var y = i * 10;
       inputs[i].y = y // or d.y = y
       return y;
})

参见 this fiddle