如何使此D3js朝阳图显示所有数据层？

问题描述

即使有更多层，我的D3js朝阳图也仅显示2层数据。 我希望它显示所有数据层

图表的实时版本在这里：D3 Chart

代码在下面。请提供有关如何使图表显示所有数据层的建议。 我需要看到的不仅仅是两层。

export default function define(runtime,observer) {
  const main = runtime.module();
  main.variable(observer()).define(["md"],function(md){return(
md`# D3 Zoomable Sunburst

This variant of a [sunburst diagram](/@mbostock/d3-sunburst),a radial orientation of D3’s [hierarchical partition layout](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition),shows only two layers of the [Flare visualization toolkit](https://flare.prefuse.org) package hierarchy at a time. Click a node to zoom in,or click the center to zoom out.`
)});
  main.variable(observer("chart")).define("chart",["partition","data","d3","DOM","width","color","arc","format","radius"],function(partition,data,d3,DOM,width,color,arc,format,radius)
{
  const root = partition(data);
  root.each(d => d.current = d);
  const svg = d3.select(DOM.svg(width,width))
      .style("width","100%")
      .style("height","auto")
      .style("font","10px sans-serif");

  const g = svg.append("g")
      .attr("transform",`translate(${width / 2},${width / 2})`)
      .on("mouseleave",mouseleave);

  const path = g.append("g")
    .selectAll("path")
    .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("fill",d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
      .attr("fill-opacity",d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
      .attr("d",d => arc(d.current))
      .on("mouSEOver",mouSEOver);

  path.filter(d => d.children)
      .style("cursor","pointer")
      .on("click",clicked);

  path.append("title")
      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

  const label = g.append("g")
      .attr("pointer-events","none")
      .attr("text-anchor","middle")
      .style("user-select","none")
    .selectAll("text")
    .data(root.descendants().slice(1))
    .enter().append("text")
      .attr("dy","0.35em")
      .attr("fill-opacity",d => +labelVisible(d.current))
      .attr("transform",d => labelTransform(d.current))
      .text(d => d.data.name);
  
  //percentage text
  const percentage_text=svg.append("text")
      .attr("id","title")
      .attr("x",(width / 2))             
        .attr("y",(width / 2))
        .attr("text-anchor","middle")  
        .style("font-size","2.5em");
  
  const parent = g.append("circle")
      .datum(root)
      .attr("r",radius)
      .attr("fill","none")
      .attr("pointer-events","all")
      .on("click",clicked);

  function clicked(p) {
    parent.datum(p.parent || root);

    root.each(d => d.target = {
      x0: Math.max(0,Math.min(1,(d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,x1: Math.max(0,(d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,y0: Math.max(0,d.y0 - p.depth),y1: Math.max(0,d.y1 - p.depth)
    });
    const t = g.transition().duration(750);
  
    // Transition the data on all arcs,even the ones that aren’t visible,// so that if this transition is interrupted,entering arcs will start
    // the next transition from the desired position.
    path.transition(t)
        .tween("data",d => {
          const i = d3.interpolate(d.current,d.target);
          return t => d.current = i(t);
        })
      .filter(function(d) {
        return +this.getAttribute("fill-opacity") || arcVisible(d.target);
      })
        .attr("fill-opacity",d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)
        .attrTween("d",d => () => arc(d.current));

    label.filter(function(d) {
        return +this.getAttribute("fill-opacity") || labelVisible(d.target);
      }).transition(t)
        .attr("fill-opacity",d => +labelVisible(d.target))
        .attrTween("transform",d => () => labelTransform(d.current));
  }
  
  //mouse over
  const totalSize = root.descendants()[0].value;
  function mouSEOver(d){
    var percentage = (100 * d.value / totalSize).toPrecision(3);
    var percentageString = percentage + "%";
    if (percentage < 0.1) {
      percentageString = "< 0.1%"; }
      percentage_text.text(percentageString);


    var sequenceArray = d.ancestors().reverse();
    sequenceArray.shift(); // remove root node from the array
    // Fade all the segments.
    d3.selectAll("path")
        .style("opacity",0.3);

    // Then highlight only those that are an ancestor of the current segment.
    g.selectAll("path")
        .filter(function(node) {
                  return (sequenceArray.indexOf(node) >= 0);
                })
        .style("opacity",1);
  }
  //mouse leave
  // Restore everything to full opacity when moving off the visualization.
    function mouseleave(d) {

      // Deactivate all segments during transition.
      //d3.selectAll("path").on("mouSEOver",null);

      // Transition each segment to full opacity and then reactivate it.
      d3.selectAll("path")
          .transition()
          .duration(200)
          .style("opacity",1)
          .on("end",function() {
                  d3.select(this).on("mouSEOver",mouSEOver);
                });

      percentage_text.text("");
    }
  function arcVisible(d) {
    return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
  }

  function labelVisible(d) {
    return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
  }

  function labelTransform(d) {
    const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
    const y = (d.y0 + d.y1) / 2 * radius;
    return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
  }

  return svg.node();
}
);
  main.variable(observer("data")).define("data",["d3"],async function(d3){return(
await d3.json("data.json")
)});
  main.variable(observer("partition")).define("partition",function(d3){return(
data => {
  const root = d3.hierarchy(data)
      .sum(d => d.size)
      .sort((a,b) => b.value - a.value);
 
  return  d3.partition()
      .size([2 * Math.PI,root.height + 1])
    (root);
}
)});
  main.variable(observer("color")).define("color",["d3","data"],function(d3,data){return(
d3.scaleOrdinal().range(d3.quantize(d3.interpolaterainbow,data.children.length + 1))
)});
  main.variable(observer("format")).define("format",function(d3){return(
d3.format(",d")
)});
  main.variable(observer("width")).define("width",function(){return(
974
)});
  main.variable(observer("radius")).define("radius",["width"],function(width){return(
width / 6
)});
  main.variable(observer("arc")).define("arc",radius){return(
d3.arc()
    .startAngle(d => d.x0)
    .endAngle(d => d.x1)
    .padAngle(d => Math.min((d.x1 - d.x0) / 2,0.005))
    .padradius(radius * 1.5)
    .innerRadius(d => d.y0 * radius)
    .outerRadius(d => Math.max(d.y0 * radius,d.y1 * radius - 1))
)});
  main.variable(observer("d3")).define("d3",["require"],function(require){return(
require("d3@5")
)});
  main.variable(observer()).define(["partition",data){return(
partition(data).descendants()[1]
)});
  return main;
}

解决方法

我做了一些更改，首先通过删除悬停和click事件使示例变得更简单了。

我需要根据this example更改圆弧半径和分割方法，并从this fiddle提取文本定位逻辑。

const width = 500,radius = width / 2,format = d3.format(",d");

const svg = d3.select('svg')
  .attr("width",width)
  .attr("height",width)
  .style("font","10px sans-serif");

const g = svg.append("g")
  .attr("transform",`translate(${radius},${radius})`);

const arc = d3.arc()
  .startAngle(d => d.x0)
  .endAngle(d => d.x1)
  .padAngle(d => Math.min((d.x1 - d.x0) / 2,0.005))
  .padRadius(radius)
  .innerRadius(d => Math.sqrt(d.y0))
  .outerRadius(d => Math.sqrt(d.y1) - 1);

d3.json("https://gist.githubusercontent.com/MargretWG/b3f9e0a383408c6e6a45fc652e83a26c/raw/8756e2320d05a774e96983234beff81b01409315/hierarchy.json").then(data => {
  const root = partition(data);
  root.each(d => d.current = d);

  const color = d3.scaleOrdinal().range(d3.quantize(d3.interpolateRainbow,data.children.length + 1));

  const path = g.append("g")
    .selectAll("path")
    .data(root.descendants().slice(1))
    .enter().append("path")
    .attr("fill",d => {
      while (d.depth > 1) d = d.parent;
      return color(d.data.name);
    })
    .attr("fill-opacity",d => d.children ? 0.6 : 0.4)
    .attr("d",d => arc(d.current));

  path.append("title")
    .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

  const label = g.append("g")
    .attr("pointer-events","none")
    .attr("text-anchor","middle")
    .style("user-select","none")
    .selectAll("text")
    .data(root.descendants().slice(1))
    .enter().append("text")
    .attr("dy","0.35em")
    .attr("transform",(d) => `translate(${arc.centroid(d)}) rotate(${getAngle(d)})`)
    .text(d => d.data.name);
});

const partition = data => {
  const root = d3.hierarchy(data)
    .sum(d => d.size)
    .sort((a,b) => b.value - a.value);

  return d3.partition()
    .size([2 * Math.PI,radius * radius])
    (root);
}

function getAngle(d) {
  // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis,while
  // for text it is the X axis.
  var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
  // If we are rotating the text by more than 90 deg,then "flip" it.
  // This is why "text-anchor","middle" is important,otherwise,this "flip" would
  // a little harder.
  return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>