Question

我有一个D3分区，显示整个分区的所有级别。

我想只在图表加载时显示第一级，然后在点击时显示后续级别。

例如，在此树中，单击节点时会显示下一级：D3Tree

以下是我的分区代码：Plunker link

$(document).ready(function(){

var width = 600,
    height = 400,
    radius = (Math.min(width, height) / 2) - 10;

var formatNumber = d3.format(",d");

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.sqrt()
    .range([0, radius]);

var color = d3.scale.category20c();

var partition = d3.layout.partition()
    .value(function(d) { 
      if(d.depth == 2)
        console.log(d.depth, d);  

        return 1; // d.size;   

    });

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");





d3.json("flare.json", function(error, root) {
  if (error) throw error;

  svg.selectAll("path")
      .data(partition.nodes(root))
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", click)
    .append("title")
      .text(function(d) { return d.name + "\n" + formatNumber(d.value); });
});

function click(d) {
  svg.transition()
      .duration(750)
      .tween("scale", function() {
        var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, 1]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
        return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
      })
    .selectAll("path")
      .attrTween("d", function(d) { return function() { return arc(d); }; });
}

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

});

我想点击一下来点击：

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

孩子们设置和取消设置，然后重新绘制

Answer 1

在display的帮助下，做一些类似于树形布局的事情会有点难以做到这一点。

当第一次绘制路径时，使所有节点的深度> 1使用display:none消失：

svg.selectAll("path")
  .data(partition.nodes(root))
  .enter().append("path")
  .attr("d", arc)
  .style("fill", function(d) {
    return color((d.children ? d : d.parent).name);
  })
  .style("display", function(d) {
    if (d.depth > 1) {
      return "none";//nodes whose depth is more than 1 make its vanish
    } else {
      return "";
    }
  })

现在在节点上单击使所有节点重新出现，除非单击根节点。

  .style("display", function(d1) {
    if (d.depth == 0 && d1.depth > 1) {
      return "none"//root node clicked so show only 2 depths.
    } else {
      return "";
    }
  })

工作代码here

D3分区 - 单击时显示下一级

1 个答案: