D3可折叠力布局动态地将节点添加到布局

I have some issues with adding nodes dynamically in my collapsible force layout. My data set will be created dynamically so the object will change every time the force layout is created so I used an example from a D3 mbostock where they used a local object instead of loading a JSON as my initial starting point.

我在可折叠力布局中动态添加节点时遇到了一些问题。我的数据集将动态创建,因此每次创建强制布局时对象都会更改,因此我使用了一个D3 mbostock中的示例,他们使用本地对象而不是加载JSON作为我的初始起点。

I have added pan + zoom but adding a node seems to not work. I have a static object (for test purposes) and my addNode function is called on click of a node. I am trying to add the nodes through: var childrenTest=[ {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938} ];

我添加了pan + zoom但添加节点似乎不起作用。我有一个静态对象(用于测试目的),单击一个节点时调用我的addNode函数。我试图通过以下方式添加节点:var childrenTest = [{“name”:“Title”,“size”:3938},{“name”:“Title”,“size”:3938},{“name”: “标题”,“大小”:3938}];

g.data.children[1].children = childrenTest;and then running the update(); which is supposed to flatten the data for collapsing and create links between nodes before updating them.

g.data.children [1] .children = childrenTest;然后运行update();在更新之前,应该压缩数据以进行折叠并在节点之间创建链接。

Unfortunately, it seems that when I do this it completely breaks my graph creating a floating cluster offset from my main graph and links and nodes go missing. I was wondering if I could get some assistance in figuring out why it will not add the nodes properly.

不幸的是,似乎当我这样做时它完全打破了我的图形,从我的主图创建了一个浮动簇偏移,链接和节点丢失了。我想知道我是否能找到一些帮助来弄清楚它为什么不能正确添加节点。

Here is an example of my code: https://jsfiddle.net/Diffusion_net/hu6t2ywb/9/

以下是我的代码示例:https://jsfiddle.net/Diffusion_net/hu6t2ywb/9/

(Note: the addnode function will only add the node on childless node click once due to the check for test purposes only)

(注意:addnode函数只会在无子节点上添加一次点击节点,因为只检查测试用途)

Thank You

1 个解决方案

#1

While adding new nodes dynamically, the key is to map the id's (look at your flatten function which assigns id's to the nodes like this -> nodes.id = ++i;) of newly created nodes in such a way that it should be unique and should not overlap with the existing id's of the nodes(which are already present on the layout). Not doing so can lead to the unpredictable behavior as in your case.

在动态添加新节点时,关键是映射id(看你的flatten函数,它将id分配给像这样的节点 - > nodes.id = ++ i;)新创建的节点,它应该是这样的唯一且不应与节点的现有id重叠(它们已经存在于布局中)。不这样做会导致不可预测的行为,就像你的情况一样。

One way to handle this is to remember how many nodes are already present on the layout so that you can assign new id values to the newly created nodes. See the modified flatten function below.

处理此问题的一种方法是记住布局中已存在多少个节点,以便您可以为新创建的节点分配新的id值。请参阅下面的修改展平功能。

var alreadyNodes = 0; //no of nodes already present on the layout
   function flatten(data) {
    console.log(data);
    var nodes = [],
    i = alreadyNodes; //offset to the node id
    var flattenNodes = 0; //no of nodes flatten under the current node
       //count only children (not _children)
       //note that it doesn't count any descendents of collapsed _children
       //rather elegant?
    function recurse(node) {
           if (node.children) node.children.forEach(recurse);
           if (!node.id) {
              node.id = ++i;
              flattenNodes++;
           }
           nodes.push(node);
    }
    recurse(data);
       //Done:
    alreadyNodes = alreadyNodes + flattenNodes;
    return nodes;
}

Here alreadyNodes stores the no of nodes that are already present on the layout and flattenNodes counts the no of nodes to be added to the layout. alreadyNodes gets updated before returning the nodes (last line). Check how an offset to the id is given every time flatten is called which ensures that newly nodes gets new id's.

这里,hasNodes存储布局中已存在的节点数,flattenNodes计算要添加到布局中的节点数。在返回节点(最后一行)之前,alreadyNodes会更新。检查每次调用flatten时如何给出id的偏移量,以确保新节点获得新的id。

I hope this helps.

我希望这有帮助。

#1