javascript - D3.js 添加可拖动圆圈在添加单个圆圈时不起作用

Question

我正在遵循这个例子:

https://bl.ocks.org/mbostock/6123708

我无法理解的是，当单击按钮时如何添加新圆圈，例如:

d3.tsv("dots.tsv", dottype, function (error, dots) {
    container.append("g")
                .attr("class", "dot")
                .selectAll("circle")
                .data(dots)
                .enter().append("circle")
                .attr("r", 5)
                .attr("cx", function (d) {
                    return d.x;
                })
                .attr("cy", function (d) {
                    return d.y;
                })
                .call(drag);
        });

        function dottype(d) {
            d.x = +d.x;
            d.y = +d.y;
            return d;
        }
self.addNode = function () {
            container.append('g')
                .attr('class', 'dot')
                .append('circle')
                .attr('r', 35)
                .attr('cx', (i * 100) + cx)
                .attr('cy', (i * 100) + cy)
                //.style('fill', 'purple')
                .call(drag);
            i++;
        };

第一部分与示例相同，然后我创建了一个函数来在容器内添加单个圆圈，问题是当我拖动新添加的圆圈时，我只能移动外部 G 元素，从而移动每个其他圈在一起。

我不明白为什么，因为功能是相同的(我什至删除了样式“fill”以确保)

Answer 1

您在 .data(dots) 中为布局提供了数据，但是当您在 addNode 函数中添加节点时，布局不知道这些新数据。您想要的是将新节点数据添加/推送到数据数组(点)并调用绘图函数。

因此，您应该将d3.tsv下的代码切割成一个函数，以便在更新数据时再次调用它。