【问题标题】:D3.js Collapsible Force Layout, collapsed by defaultD3.js 可折叠力布局,默认折叠
【发布时间】:2016-01-15 14:38:46
【问题描述】:

我想使用默认折叠的可折叠力图(从一个节点开始)。我遇到了这个:http://bl.ocks.org/david4096/6168323,但它是空白的并且不起作用。我正在使用最新的 Mozilla Firefox 43.0.4。我什至把它放到 plunker 上,结果相同 - 空白。

有人能找出问题所在吗?

还可以部分折叠吗?这意味着第一组孩子扩大了,但其他一切都崩溃了?

My non-working example on plunker

相信可以通过修改更新功能来实现。

将json数据表中的“children”改为“_children”不能正常工作。

function update(d) {

  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

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

我看这里:d3.js collapsible force layout with all the nodes collapsed 和这里:How can I start with all the nodes collapsed in d3js?

没有一个解决方案对我有用。

将感谢任何建议。

2018 年 1 月 28 日更新

感谢下面的回答,效果很好。

这是一个工作示例:http://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview

【问题讨论】:

  • 只是模拟点击中心节点子节点?
  • 嗨@thisOneGuy。非常感谢您的回复。我已经出国4天了。你可以再详细一点吗?如何模拟点击中心节点子节点?
  • 选择中心节点的(父)子节点并在这些节点上调用点击触发器

标签: javascript d3.js diagram


【解决方案1】:

基本上,我根据名称将 ID 添加到节点上的圆圈中:

.append("circle").attr('id', function(d){ return d.name})

然后我填充了所有父母子女姓名的数组,即您要折叠的节点:

if(parentschildren.length<1){ //so it doesn't populate it more than once
          node.filter(function(d){
            //console.log(d.name)
            return d.name === 'PARENT' //return just the parent node
          }).each(function(d){
            for(i=0;i<d.children.length;i++){
              parentschildren.push(d.children[i].name);
            }

          });
          }

然后我使用填充的数组循环选择我想要点击的节点并调用一个点击函数来模拟对选定节点的点击:

function simulateClick(){


        $.fn.d3Click = function (i) { //simulate click
          //if(i===0){
  this.each(function (i, e) {

    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
console.log(e);

    e.dispatchEvent(evt);
   // nodeEnter.on("click", click)
    evt.stopPropagation()


  }); //}
};

for(i=0;i<parentschildren.length;i++){ //loop through created array

$('#'+parentschildren[i]).d3Click(); //select element to click
}
    }

至于唯一 ID,我会这样做:

node.each(function(d,i){ // use i to iterate through
d.uniqueID = 'uniqueNode' + i;
}

那段代码会给每个人一个唯一的价值。所以第一个将是 uniqueNode1 然后是 uniqueNode2 等等。然后将其应用于您的节点:

nodes.attr('id'(function(d){
return d.uniqueID;
})

至于您的其他问题(我认为您应该将其添加到这个问题中,而不是在 cmets 中,以便人们知道我的答案为何如此之大),这就是答案。

为了让所有节点开始折叠,我使用了递归函数,您已经必须填充一个数组来为您提供具有子节点的节点:

var nodes2 = [];
function flatten(root) {
      var nodes = [], i = 0;

      function recurse(node) {
        if (node.children) {
          nodes2.push(node.name) //push the name of the node to the array
          node.children.forEach(recurse);
        }
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

      recurse(root);
      console.log(nodes2)
      return nodes;
    }

现在,正如我之前所说,我已经根据名称给了它们 id,所以要选择它们,我所要做的就是遍历这个新的节点数组 (nodes2),然后单击与每个节点具有相同 ID 的节点该数组中的元素。但是你不能马上这样做,因为这个数组从最高点(父)开始向下,所以我不得不反转数组:

var newNodes = [];
  for(i=nodes2.length; i>=0; i--){
    newNodes.push(nodes2[i])
  }

现在使用这个数组遍历选择具有相同 ID 的节点:

for(i=0;i<newNodes.length;i++){
 if(newNodes[i]){ //check if i isnt undefined etc
   $('#'+newNodes[i]).d3Click();
 }

}

然后再次单击父级两次(关闭然后打开),如您所愿:

$('#PARENT').d3Click();

$('#PARENT').d3Click();

希望能解决你所有的问题,这里是最终更新的 plnkr:http://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview

【讨论】:

  • 如果您想折叠所有内容,使其仅显示父节点,而不是循环遍历数组,请将其注释掉并选择父节点:$('#PARENT').d3Click();
  • 我会使用更好的 ID,就像我在这里一样,因为看起来你可能有一些相似的名字。尝试创建唯一 ID,以免混淆
  • 非常感谢@thisOneGuy!!!看起来不错。实际上在项目中,一些子节点的名称是相同的,所以我需要为节点分配唯一的 ID。我可以这样做,以便在 .json 文件中我将唯一的 id 属性分配给节点,例如。 "uniqueid": "blabla", ,然后将您的代码编辑为.append("circle").attr('id', function(d){ return d.uniqueid})?我是一名建筑师,这对于我的理解来说已经相当先进了。非常感谢您的慷慨帮助!
  • 还有一件事。当我转到您更新的 [plnkr.co] (plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview) 是否可能默认选择父节点而不是“E”节点?当我点击节点时,整个分支展开,会不会一个接一个展开?孩子一个孩子,取决于点击...再次感谢您的慷慨!
  • 非常感谢您对我的帮助!我现在用相同的名字破解了它。我稍微修改了您的答案,并在 json 文件中使用了唯一的“值”属性。这里的工作示例:plnkr.co/edit/rqh8SD?p=preview
猜你喜欢
  • 2014-04-02
  • 1970-01-01
  • 2016-01-28
  • 2023-03-20
  • 1970-01-01
  • 1970-01-01
  • 2013-03-10
  • 2013-07-01
  • 1970-01-01
相关资源
最近更新 更多