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元素，因此每个移动其他圈子在一起。

我无法理解为什么，因为功能是相同的（我删除了风格＆＃39;填充＆＃39;以确保）

Answer 1

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

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

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

1 个答案: