Question

是否可以在点击事件后更新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 + ")"; });


})

D3.js强制定向图，如何在“点击”上更新单个节点

0 个答案: