javascript - 如何将 donut 的 svg 添加到每个节点以代替径向 TreeMap 中的圆圈

Question

我正在使用 d3 版本 4 创建径向树。预期的 ui 应该是每个径向树节点应该看起来像 d4 的 donut chart ，它应该向我们显示一些百分比值，我添加了预期快照和当前开发快照。任何建议都会有所帮助，谢谢。

 var data = {
    "name": "AirtelApp",
    "children": [
      { 
        "name": "airteltopicsOne",
        "children": [
          { "name": "airteltopicsOne1.1" },
          { "name": "airteltopicsOne1.2" },
        ]
      },
      { "name": "airteltopicstwo",
        "children": [
          { "name": "airteltopicstwo2.1" },
          { "name": "airteltopicstwo2.2" },
          { "name": "airteltopicstwo2.3" },
          { "name": "airteltopicstwo2.4" },
        ] 
      },
      { 
        "name": "airteltopicsthree",
        "children": [
          { "name": "airteltopicsthree3.1" },
          { "name": "airteltopicsthree3.2" }
        ]
      },
      { 
        "name": "airteltopicsfour",
        "children": [
          { "name": "airteltopics4.1" },
          { "name": "airteltopicsfour4.2" }
        ]
      },
    ]
  };
      //height width for chart
    /*   const width = 750,
      height = 750,
      radius = width / 2; */

      var margin = {top: 20, right: 90, bottom: 30, left: 90},
    width = 750,
    height = 750,
  radius = width / 2;
        
      //const tree = d3.cluster().size([2 * Math.PI, radius - 100]);

     var treemap = d3.cluster().size([2 * Math.PI, radius - 100]);

    var nodes = d3
          .hierarchy(data)
          .sort((a, b) => d3.ascending(a.data.name, b.data.name))

  console.log(nodes);

  nodes = treemap(nodes);

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


  console.log(svg);

var node =g
        .selectAll('.node')
        .data(nodes.descendants())
        .join('circle')
        .style("stroke", "red")
        .attr(
          'transform',
          (d) => `
        rotate(${(d.x * 180) / Math.PI - 90})
        translate(${d.y},0)
      `
        )
        .attr('fill', (d) => (d.children ? '#FFE7E9' : '#D6F8FF'))
        .attr('r', 30.5);
   
var link = g.attr('fill', 'none')
        .attr('stroke', '#555')
        .attr('stroke-opacity', 0.1)
        .attr('stroke-width', 2.5)
        .selectAll('path')
        .data(nodes.links())
        .join('path')
        .attr(
          'd',
          d3
            .linkRadial()
            .angle((d) => d.x)
            .radius((d) => d.y)
        );

        var fonts = g
        .attr('font-family', 'sans-serif')
        .attr('font-size', 10)
        .attr('stroke-linejoin', 'round')
        .attr('stroke-width', 3)
        .selectAll('text')
        .data(nodes.descendants())
        .join('text')
        .attr(
          'transform',
          (d) => `
        rotate(${(d.x * 180) / Math.PI - 90}) 
        translate(${d.y},0) 
        rotate(${d.x >= Math.PI ? 180 : 0})
      `
        )
        .attr('dy', '0.31em')
        .attr('x', (d) => (d.x < Math.PI === !d.children ? 6 : -6))
        .attr('text-anchor', (d) =>
          d.x < Math.PI === !d.children ? 'start' : 'end'
        )
        .text((d) => d.data.name)
        .clone(true)
        .lower()
        .attr('stroke', 'white');

.gr-bg {
    fill: linen;
}
 svg {
                /* border: solid 1px #ccc; */
            }
            .link {
                fill: none;
                stroke: black;
                stroke-width: 1.5px;
            }
            .node circle {
  fill: #999;
}

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



.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: back;
  stroke-opacity: 0.1;
  stroke-width: 2.5px;
}

.hello {
  width: 100%;
  height: 400px;
}

.node:hover{
  stroke-width: 7px !important;
  opacity: 1 !important;
}
ul { 
  list-style: none;
  /* margin: 5px 5px; */
}
li {
  margin: 0px 0;
}
text {
  font: 16px sans-serif;
  fill: black;
  transition: all 0.3s;
}

.label {
  fill: #000;
}

.chart {
  max-width: 600px;
  max-height: 600px;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

.node {
  @for $i from 1 through 30 {
    &:nth-child(#{$i}) .graph {
      $delay: $i * 0.075s;
      animation-delay: $delay;
    }
  }
}

.graph {
  opacity: 0;
  animation-name: animateIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

  .node, .link {
    cursor: pointer;
  }

  .overlay{
      background-color:#EEE;
  }
   
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 4.5px;
  }
   
  .node text {
    font-size:12px; 
    font-family:sans-serif;
  }
   
  .link {
    fill: none;
    stroke: black;
    stroke-width: 4px;
  }

<div id="chart" class="chart"></div>

实际上我正在尝试添加带有径向树节点的圆环图，任何建议，添加 snap

Answer 1

最简单的方法是更换

 .join('circle')
 ...

和

 .join('g')
 ...

您仍然希望对 g 元素应用变换，就像对圆圈所做的那样，尽管我们可以删除应用于圆圈的其余样式属性。
现在我们有一个选择 g具有为每个 g 放置 [0,0] 的变换的元素每个圆的中心在哪里。
如果我们想要每个圆的饼图或圆环图，我们可以使用 selection.each() 运行代码为每个圆圈附加一个饼图，它可能如下所示:

 selection.each(function(d) {  // d being the node datum.
    let g = d3.select(this) // our positioned g element.

    let pie = d3.pie() // setup a pie layout
       ... 

    let arc = d3.arc() // setup an arc generator
       ...

    g.selectAll(null)
     .data(pie(d.data.pieData) // pass property containing pie data to pie layout generator.
     .enter()
     .append("path")
     .attr("d", arc) // use arc generator
     .attr("fill", function(segmentDatum) { /* logic using segment's datum  */})
     ...
     
 })

根据每个饼图的自定义程度，您可以从每个函数中删除 d3.pie 或 d3.arc 设置。以上假设每个节点的数据都包含饼图所需的数据(代表每个段的值/对象数组 - 您的示例数据没有这个)，当然要制作 donut ，您需要设置圆弧的内半径值作为大于零的值。
您完成圆圈定位的方式意味着饼图/ donut chart 是旋转的:如果您没有文本，问题不大，但是您可以嵌套一个具有反向旋转的子 g 来固定饼图/ donut 。