Javascript 默认情况下，D3层次结构折叠到第一级_Javascript_Html_Css_D3.js_Svg

Javascript 默认情况下，D3层次结构折叠到第一级

javascript html css d3.js svg

Javascript 默认情况下，D3层次结构折叠到第一级,javascript,html,css,d3.js,svg,Javascript,Html,Css,D3.js,Svg,我有下面的缩进树代码。我希望在默认情况下折叠树，只显示第一级子节点或根节点，这无关紧要。我已经尝试了几种方法，我认为这些方法不会成功，我认为下面的部分可以奏效： function toggleAll(d) { if (d.children) { d.children.forEach(toggleAll); toggle(d); }

我有下面的缩进树代码。我希望在默认情况下折叠树，只显示第一级子节点或根节点，这无关紧要。我已经尝试了几种方法，我认为这些方法不会成功，我认为下面的部分可以奏效：

function toggleAll(d) {
                   if (d.children) {
                   d.children.forEach(toggleAll);
                  toggle(d);
                   }
               }

                 root.children.forEach(toggleAll);
                  toggle(root);
                  });

下面是带有相应flare.json文件的html：

<meta charset="utf-8">
<style>

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: 0.8;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 30, right: 20, bottom: 30, left: 20},
    width = 960,
    barHeight = 20,
    barWidth = (width - margin.left - margin.right) * 0.8;

var i = 0,
    duration = 400,
    root;

var diagonal = d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; });

var svg = d3.select("body").append("svg")
    .attr("width", width) // + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("flare.json", function(error, flare) {
  if (error) throw error;
  root = d3.hierarchy(flare);
  root.x0 = 0;
  root.y0 = 0;
  update(root);

function toggleAll(d) {
                   if (d.children) {
                   d.children.forEach(toggleAll);
                  toggle(d);
                   }
               }

                 root.children.forEach(toggleAll);
                  toggle(root);
                  });


function update(source) {

  // Compute the flattened node list.
  var nodes = root.descendants();



  var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);

  d3.select("svg").transition()
      .duration(duration)
      .attr("height", height);

  d3.select(self.frameElement).transition()
      .duration(duration)
      .style("height", height + "px");

  // Compute the "layout". TODO https://github.com/d3/d3-hierarchy/issues/67
  var index = -1;
  root.eachBefore(function(n) {
    n.x = ++index * barHeight;
    n.y = n.depth * 20;
  });

  // Update the nodes.
  var node = svg.selectAll(".node")
    .data(nodes, function(d) { return d.id || (d.id = ++i); });

  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .style("opacity", .5);

  // Enter any new nodes at the parent's previous position.
  nodeEnter.append("rect")
      .attr("y", -barHeight / 2)
      .attr("height", barHeight)
      .attr("width", barWidth)
      .style("fill", color)
      .on("click", click);

  nodeEnter.append("text")
      .attr("dy", 3.5)
      .attr("dx", 5.5)
      .text(function(d) { return d.data.name; });

   // Transition nodes to their new position.
  nodeEnter.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .style("opacity", 1);

  node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .style("opacity", 1)
    .select("rect")
      .style("fill", color);

  // Transition exiting nodes to the parent's new position.
  node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .style("opacity", 0)
      .remove();

  // Update the links.
  var link = svg.selectAll(".link")
    .data(root.links(), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
    .transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  root.each(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}



// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}




function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

</script>

我想帮忙

看着

function toggleAll(d) {
                   if (d.children) {
                   d.children.forEach(toggleAll);
                  toggle(d);
                   }
               }

                 root.children.forEach(toggleAll);
                  toggle(root);
                  });

我认为

});

不应该在那里

很好的递归函数
只需重新缩进即可：

function toggleAll(d) {
  if (d.children) {
    d.children.forEach(toggleAll);
    toggle(d);
  }
}

对它的称呼作一点调整：

toggleAll(root);

^将全部关闭。注意：如果任何东西已经关闭（单击），它将被打开，
然后

^将（仅）重新启用根目录

希望这有帮助

在数据准备就绪后通过添加切换（单击）重写代码。请看下面的演示，不确定您是想要这个还是其他东西

var保证金={
前30名，
右:20,，
底数：30，
左：20
},
宽度=960，
杆高=20，
条形宽度=（宽度-边距.左侧-边距.右侧）*0.8；
var i=0，
持续时间=400，
根；
var diagonal=d3.linkHorizontal（）
.x（功能（d）{
返回d.y；
})
.y（功能（d）{
返回d.x；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）/+margin.left+margin.right）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var flare=getFlare（）；
//d3.json（“flare.json”，函数（错误，flare）{
//如果（错误）抛出错误；
根=d3.层次结构（flare）；
root.x0=0；
root.y0=0；
更新（根）；
函数toggleAll（d）{
如果（d.儿童）{
d、 儿童。forEach（toggleAll）；
//切换（d）；
点击（d）
}
}
根。子。forEach（toggleAll）；
//切换（根）；
//});
函数更新（源）{
//计算展平节点列表。
var nodes=root.subjects（）；
变量高度=数学最大值（500，nodes.length*barHeight+margin.top+margin.bottom）；
d3.选择（“svg”）.transition（）
.持续时间（持续时间）
.attr（“高度”，高度）；
d3.select（self.frameElement）.transition（）
.持续时间（持续时间）
.样式（“高度”，高度+px”）；
//计算“布局”。TODOhttps://github.com/d3/d3-hierarchy/issues/67
var指数=-1；
root.eachBefore（函数（n）{
n、 x=++索引*条形高度；
n、 y=n.深度*20；
});
//更新节点。
var node=svg.selectAll（“.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.样式（“不透明度”，.5）；
//在父节点的上一个位置输入任何新节点。
nodeEnter.append（“rect”）
.attr（“y”，-barHeight/2）
.attr（“高度”，barHeight）
.attr（“宽度”，barWidth）
.样式（“填充”，颜色）
。开启（“点击”，点击）；
nodeEnter.append（“文本”）
.attr（“dy”，3.5）
.attr（“dx”，5.5）
.文本（功能（d）{
返回d.data.name；
});
//将节点转换到其新位置。
nodeEnter.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
})
.样式（“不透明”，1）；
node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
})
.style（“不透明度”，1）
.选择（“rect”）
.样式（“填充”，颜色）；
//将退出节点转换到父节点的新位置。
node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.style（“不透明度”，0）
.remove（）；
//更新链接。
var link=svg.selectAll（“.link”）
.data（root.links（），函数（d）{
返回d.target.id；
});
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});
})
.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
变量o={
x:source.x，
y:来源，y
};
返回对角线({
资料来源：o，
目标：o
});
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
根。每个（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}
功能色（d）{
返回d.#children？#3182bd:d.children？#c6dbef:#fd8d3c；
}
函数getFlare（）{
返回{
“名称”：“flare”，
“儿童”：[
{
“名称”：“vis”，
“儿童”：[
{
“名称”：“事件”，
“儿童”：[
{
“名称”：“数据事件”，
“尺寸”：2200，
“儿童”：[
{
“名称”：“数据事件”，
“尺寸”：800，
“颜色”：“红色”
},
{
“名称”：“选择项”
toggleAll(root);

toggle(root);