D3 强制布局应在单击节点时添加节点和链接

Question

我有一个有效的 D3 示例。我使用武力，一切正常。但我有一个小问题。假设我有 4 个节点。看看这张照片：http://i.imgur.com/J0P4I0n.png 现在当我点击节点“AKZO NV”时，我想得到：http://i.imgur.com/fGXVGMd.png 和旧节点和链接。

所以最后我想要 7 个节点。而“AKZO NV”将成为焦点。所有节点仍然有它们的链接，“AKZO NV”应该有两个。我想你现在知道我想要什么了。

所以我已经有了这个代码。像魅力一样工作，但它没有正确添加新节点和链接。我认为命令的顺序存在一个小问题。

欢迎任何想法：

var alreadyThere = false;
var nodeCircles = {};
var svg, link, node;
var force = d3.layout.force();
var nodes, links;
var width = 700, height = 400;
var boxIDName = "#main-rightinfo";
var JSONFORMERGING;

function createRealGraph(jsonData){
    //console.log(jsonData);
    if (alreadyThere == false){
        JSONFORMERGING=jsonData;
        initializeGraph(jsonData);
    }else{
        update(JSONFORMERGING.concat(jsonData));
    }
    alreadyThere = true;
}
function update(jsonData) {
    console.log(jsonData);
    jsonData.forEach(function(link) {
      link.source = nodeCircles[link.source] || (nodeCircles[link.source] = {name: link.sourceName, ID: link.source, class: link.sourceClass});
      link.target = nodeCircles[link.target] || (nodeCircles[link.target] = {name: link.targetName, ID: link.target, class: link.targetClass});
    });

    link = link.data(links);
    link.enter().insert("line")
      .attr("class", "link");

    node = node.data(nodes);
    node.enter().append("g")
        .attr("class", "node")
      .attr("r", 5)
      .call(force.drag);

    force 
        .nodes(d3.values(nodeCircles))
        .links(jsonData)
        .start();
    nodes = force.nodes();
    links = force.links();
}
function initializeGraph(jsonData){
    jsonData.forEach(function(link) {
      link.source = nodeCircles[link.source] || (nodeCircles[link.source] = {name: link.sourceName, ID: link.source, class: link.sourceClass});
      link.target = nodeCircles[link.target] || (nodeCircles[link.target] = {name: link.targetName, ID: link.target, class: link.targetClass});
    });

    force 
        .nodes(d3.values(nodeCircles))
        .links(jsonData)
        .size([width, height])
        .linkDistance(60)
        .charge(-200)
        .on("tick", tick)
        .start();

    nodes = force.nodes();
    links = force.links();

    svg = d3.select("#main-right")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
    svg
        .append("svg:defs").selectAll("marker")
        .data(["end"]) 
        .enter().append("svg:marker")   
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 27)
        .attr("refY", -0.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr('fill', '#00b');

    link = svg.selectAll(".link")
        .data(links)
        .enter().append("line")
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click", function(d) {click(d);})
        .on("dblclick", function(d) {dblclick(d);})
        .call(force.drag);
    node
        .append("image")
        .attr("xlink:href",  function(d) {if (d.class == "Person") {return "pics/node_person.png";} else {return "pics/node_appln.png";} })
        .attr("x", -20)
        .attr("y", -20)
        .attr("width", 40)
        .attr("height", 40);
    node
        .append("text")
        .attr("x", 19)
        .attr("dy", ".25em")
        .text( function(d) {return d.name; });

    function tick() {
      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
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }
}

Answer 1

你只需要测试它是否不是一个对象。这就像一个魅力：

jsonData.forEach(function(link) {
        if (typeof(link.source) != "object"){
            link.source = nodeCircles[link.source] || (nodeCircles[link.source] = {name: link.sourceName, ID: link.source, class: link.sourceClass});
        }
        if (typeof(link.target) != "object"){
            link.target = nodeCircles[link.target] || (nodeCircles[link.target] = {name: link.targetName, ID: link.target, class: link.targetClass});
        } 
    });   

Answer 2

我正在解决同样的问题并得到了“解决方案”。它仍然是一个原型，但也许对你有帮助。

每次鼠标点击节点都会调用一个函数并检测新节点。它们都保存在nodes 中并且都处于活动状态，这意味着显示器上的所有节点都在activeNodes 中。属于从根节点到被点击的路径的所有节点都存储在pathNodes。结果是，只显示活动路径，包括被点击的路径的子节点。

希望它得到清楚的解释。为了更好的理解，请查看源代码：http://github.com/nextlevelshit/d3_nested_nodes

想玩的可以看看：http://dailysh.it/github/d3_nested_nodes/

这里是我的代码的 sn-p：

/**
 * Triggering mouse click start
 */

function mousedown() {

  if (mousedown_node !== null) {

    var pathNodes = findPathNodesTo(mousedown_node);

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

    var newNodes = findNodesbyParentId(mousedown_node.id),
      startingPoint = {
        x: mousedown_node.x,
        y: mousedown_node.y
      };

    for (var i = 0; i < pathNodes.length; i++) {
      newNodes.push(pathNodes[i]);
      pathNodes[i].path = true;
    }

    var removeNodes = activeNodes.diff(newNodes);
    var addNodes = newNodes.diff(pathNodes).diff(activeNodes);

    for (var i = 0; i < removeNodes.length; i++) {
      removeNode(removeNodes[i].id);
    }

    for (var i = 0; i < addNodes.length; i++) {
        addNodes[i].x = startingPoint.x;
        addNodes[i].y = startingPoint.y;
        activeNodes.push(addNodes[i]);
        activeLinks.push({source: findNode(addNodes[i].parent), target: findNode(addNodes[i].id)});
    }

      // TODO: Find a smoother way do delay popping out new nodes
    });

  }

  restart();
}

最后一个问题是找到一种平滑的方式来弹出新节点...