Javascript D3.js力有向图，如何更新“上的单个节点”；点击"；

是否可以在单击事件后更新for有向图中单个节点的位置

http://jsfiddle.net/typeofgraphic/jx501n0r/2/

节点在首次加载时设置了不同的属性。我试图实现的是，单击的节点根据值的变化（在本例中为“活动”）重新定位自身（无需重新加载整个图形）

我试过几种不同的方法。重要的是，图形不能在页面上重新加载，其他节点可以移动以适应要移动的单击节点，但不能重新加载页面

代码如下：

var ds = {
    nodes: [
        { name: "1", active: false },
        { name: "2", active: false },
        { name: "3", active: true },
        { name: "4", active: false },
        { name: "5", active: false },
        { name: "6", active: true },
        { name: "7", active: false },
        { name: "8", active: true },
        { name: "9", active: false },
        { name: "10", active: false },
        { name: "11", active: true },
        { name: "12", active: false },
        { name: "13", active: false },
        { name: "14", active: false }
    ],
    edges: [
        { source: 0, target: 1 , value: 10},
        { source: 4, target: 1, value: 40 },
        { source: 5, target: 1, value: 40 },
        { source: 6, target: 1, value: 40 },
        { source: 7, target: 1, value: 10 },
        { source: 8, target: 1, value: 40 },
        { source: 9, target: 1, value: 40 },
        { source: 10, target: 1, value: 40 },
        { source: 11, target: 1, value: 40 },
        { source: 12, target: 1, value: 40 },
        { source: 13, target: 1, value: 40 }
    ]
};

var w = 300,
    h = 300;

var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

var force = d3.layout.force()
        .nodes(ds.nodes)
        .links(ds.edges)
        .linkDistance(function(d){ return d.active == true ? [10] :[200] })
        .charge(function(d){ return d.active == true ? [-100] :[-50] })
        .size([w, h]);

force.on("tick", function() {

    edges.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

    nodes.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

// Restart the layout.
force.start();

// DRAW EDGES
var edges = svg.selectAll("line")
        .data(ds.edges)
        .enter()
        .append("line")
        .style("stroke", "#ccc")
        .style("stroke-width", 1);

// DRAW NODES
var nodes = svg.selectAll("circle")
.data(ds.nodes)
.enter().append("circle")
.attr("r", 10)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { 
    return d.name === "primary" ?  "#466BB0" : "dark-grey"; })
.style("stroke", "white")
.style("stroke-width", "1.5px")
.call(force.drag);

// CLICK EVENTS
nodes.on("click", function(d){
    d.active = true;
    console.log(d.active)

    d3.select(this).transition().style({
        fill: "red" 
    });

    // Restart the layout.
    //force.start();

    edges.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

    nodes.attr("transform", function(d) { console.log(d); return "translate(" + d.x + "," + d.y + ")"; });


})

---

将代表节点的基准的

fixed

属性设置为

true

，并相应地设置其

x

和

y

属性。您可能需要重新启动强制布局，使

勾选

处理程序拾取新位置。在单击事件函数中，固定属性确实设置为true。x和y坐标由.charge和.linkDistance中的函数确定，您可以在底部看到一个force.start（）调用，该调用已注释掉。这并不强迫我重新画出我所期望的东西。也许你可以更明确一些，也许我误解了你的评论？好吧，现在我不知道你的意思了。你想在单击时“步进”模拟，还是想将单击的节点移动到新的固定位置？我不介意这种方法，但我不能让图形完全消失并重新绘制。顶部有一个指向jsfiddle上的代码的链接，固定位置是可以的，但我很高兴在这个阶段，图形只需重新运行（更新）并调整数据已更改的节点，即根据属性值的更改移动其位置（active:true），如上所述，单击即可将节点移动到新的固定位置，您需要为它设置

fixed

、

x

和

y

属性。