Question

我根据我在书中看到的一些代码 - http://jsfiddle.net/hiwilson1/o3gwejbx/2，将以下的jfiddle放在一起。从广义上讲，我会关注正在发生的事情，但有一些方面我没有遵循。

svg.on("mousemove", function () {

    var point = d3.mouse(this), 
        node = {x: point[0], y: point[1]}; 

    svg.append("circle")
        .data([node])
            .attr("r", 1e-6)
            .transition()
            .attr("r", 4.5)
            .transition()
            .delay(1000)
            .attr("r", 1e-6)
            .remove();
        force.nodes().push(node); 
        force.start(); 
});

在这里，我们构建新的数据点，并附加一个包含此数据点的属性x和y的圆。我将节点半径转换为然后转出然后删除（）它。这是我不遵循的一点 - 在删除它之前，数据点被添加到force.nodes（）数组，而不是圆圈本身，只是数据点。然后我开始（）力量。

为什么我们在将数据点推入force.nodes（）数组之前删除圆圈。
为什么我们只将数据点推送到force.nodes（）数组中，是否需要引用圆圈？或者圆圈是否只是数据点的可视化表示并且操纵数据点操纵圆圈？
为什么我们每次移动鼠标时都会启动力（）？我认为force（）在后台滴答作响，并且在追加每个节点后不需要重新启动？

更新：我认为我最终想要明确的是force（）布局实际上是在做什么。

理论：你给力布局一个节点数组。对于每个数据元素，提供或任意分配x和y。一旦力开始，就不断重新计算阵列，以根据所施加的额外力特性（例如重力和电荷）移动那些x和y分量。力布局与圆圈本身的可视化无关 - 您必须不断绘制它们/刷新它们的x和y位置以反映力正在操纵的数组值的位置。

这是否正确？

Answer 1

首先：转换完成后调用Remove（）（包括延迟）。在该示例中，圆圈再次变大并变小。此时，它将被 .remove（）删除。

第二：这条代码是每次勾选力量再次选择所有圆圈并移动圆圈：

force.on("tick", function () {
    svg.selectAll("circle")
    .attr("cx", function (d) {return d.x;})
    .attr("cy", function (d) {return d.y;});
});

第三：在每次鼠标移动时创建新圈，并添加到现有的力。

d3强制添加和删除节点

1 个答案: