Question

我是D3.js问题的初学者。我建立了一个力模拟图以表示网络。数据在用户交互时得到更新（单击节点会触发AJAX请求以从服务器提取新的JSON树）因此，在接收数据之后，我将更新D3数据（我正在尝试遵循“常规更新模式”）。基本上，此功能是在新的“ tree.json”可用后调用的：

d3.json("tree.json",function(error,graph){

status = "running";

node = node.data(graph.nodes)
    .enter()
    .append("circle")
    .attr("r", 5)
    .on("click", new_ajax)
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
    .merge(node)

node.exit().remove()
node.attr("r",5)
link.attr("stroke-width", function(d) { return Math.sqrt(d.value); })
node.append("title")
      .text(function(d) { return d.id; });
node.attr("fill", function(d) { return color(d.group); })
link = link.data(graph.links)
    .enter().append("line")
        .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
    .merge(link);
link.exit().remove();

simulation
    .nodes(graph.nodes);

link_force =  d3.forceLink(graph.links)
                    .id(function(d) { return d.id; })

simulation.force("links",link_force)
simulation.alpha(1).restart();
simulation.on("tick", tickActions );
})

代码的其余部分是经典的d3布局：（我在这里没有拖动和缩放功能

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

var svg = d3.select("svg")
    .attr("width", x)
    .attr("height", y)
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var nodes_data =  []
var links_data = []
var status = 0;

var simulation = d3.forceSimulation()
    .force("charge_force", d3.forceManyBody())
    .force("center_force", d3.forceCenter(width / 2, height / 2))
    .alphaTarget(1)

var g = svg.append("g")
    .attr("class", "everything");

var link = g.append("g")
    .attr("class", "links")
    .selectAll("line")
var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .on("click", new_ajax)
var zoom_handler = d3.zoom()
    .on("zoom", zoom_actions);

zoom_handler(svg);     

function tickActions() {
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });      
    link
        .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; });

}

好吧，以这种方式创建新网络的工作就像一种魅力，但是我注意到，如果有必要，节点和链接不会被删除。这意味着node.exit().remove()行和link.exit().remove()这行没有做任何事情...

我想我缺少了一些东西

希望你们得到了一些建议...

D3：更新力模拟

0 个答案: