未在 json 文件中的子节点中定义大小的可缩放旭日形可视化

Question

我使用了这个 root = d3.hierarchy(root); root.sum(d => d.size);

在我的 json 中，我没有子节点的大小值，如何生成正确的 d3 Zoomable sunburst 可视化？

这是我的代码

常量宽度 = window.innerWidth, 高度 = window.innerHeight, maxRadius = (Math.min(width, height) / 2) - 5;

const formatNumber = d3.format(',d');

const x = d3.scaleLinear() .range([0, 2 * Math.PI]) .clamp(true);

const y = d3.scaleSqrt() .range([maxRadius*.1, maxRadius]);

const color = d3.scaleOrdinal(d3.schemeCategory20);

const partition = d3.partition();

const arc = d3.arc() .startAngle(d => x(d.x0)) .endAngle(d => x(d.x1)) .innerRadius(d => Math.max(0, y(d.y0))) .outerRadius(d => Math.max(0, y(d.y1)));

const middleArcLine = d => { const halfPi = Math.PI/2;常数角度 = [x(d.x0) - halfPi, x(d.x1) - halfPi];常量 r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);

const middleAngle = (角度[1] + 角度[0]) / 2;常量反转方向 = middleAngle > 0 && middleAngle

常量路径 = d3.path(); path.arc(0, 0, r, 角度[0], 角度[1], 反转方向）；返回路径.toString(); };

const textFits = d => { const CHAR_SPACE = 6;

const deltaAngle = x(d.x1) - x(d.x0);常量 r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);常量周长 = r * deltaAngle;

return d.data.name.length * CHAR_SPACE

const svg = d3.select('body').append('svg') .style('width', '100vw') .style('height', '100vh') .attr('viewBox', ${-width / 2} ${-height / 2} ${width} ${height}) .on('click', () => focusOn()); // 重置缩放 在画布上点击

d3.json('dummy3Copy.json', (error, root) => { if (error) throw error; //开始自定义代码

//结束自定义代码 root = d3.hierarchy(root); root.sum(d => d.size);

const slice = svg.selectAll('g.slice') .data(partition(root).descendants());

slice.exit().remove();

const newSlice = slice.enter() .append('g').attr('class', 'slice') .on("mouseover", mouseover) .on("mouseout", mouseOutArc) .on('click', d => { d3.event.stopPropagation();聚焦（d）； });

newSlice.append('title') .text(d => d.data.name + '\n' + d.data.id); //.on("鼠标悬停", 鼠标悬停);

newSlice.append('path') .attr('class', 'main-arc') .style('fill', d => color((d.children ? d : d.parent).data.name)) .attr('d', arc);

newSlice.append('path') .attr('class', 'hidden-arc') .attr('id', (_, i) => hiddenArc${i}) .attr('d', middleArcLine);

const text = newSlice.append('text') .attr('display', d => textFits(d) ? null : '无');

// 添加白色轮廓 text.append('textPath') .attr('startOffset','50%') .attr('xlink:href', (_, i) => #hiddenArc${i} ) .text(d => d.data.name) .style('fill', 'none') .style('stroke', '#fff') .style('stroke-width', 5) .style('stroke-linejoin', 'round');

text.append('textPath') .attr('startOffset','50%') .attr('xlink:href', (_, i) => #hiddenArc${i} ) .text(d => d.data.name); });

var tooltip = d3.select("body") .append("div") .attr("id", "工具提示") .style("位置", "绝对") .style("z-index", "10") .style("不透明度", 0);

函数格式描述（d）{

  return  '<b>' + d.name + '</b></br>'; } function mouseover(d) {
 d3.select(this).attr("stroke","black")             
       tooltip.html(format_description(d));
      return tooltip.transition()
        .duration(50)
        .style("opacity", 0.9);

} 函数 mouseOutArc(){ d3.select(this).attr("stroke","") 返回 tooltip.style("不透明度", 0); } function focusOn(d = { x0: 0, x1: 1, y0: 0, y1: 1 }) { // 如果没有数据点，则重置为顶层 指定

const transition = svg.transition() .duration(750) .tween('scale', () => { const xd = d3.interpolate(x.domain(), [d.x0, d.x1]), yd = d3.interpolate(y.domain(), [d.y0, 1]);返回 t => { x.domain(xd(t)); y.domain(yd(t)); }; });

transition.selectAll('path.main-arc') .attrTween('d', d => () => 弧（d））；

transition.selectAll('path.hidden-arc') .attrTween('d', d => () => 中弧线(d));

transition.selectAll('text') .attrTween('display', d => () => 文本适合（d）？ null : '无');

moveStackToFront(d);

//

function moveStackToFront(elD) { svg.selectAll('.slice').filter(d => d === elD) .each(function(d) { this.parentNode.appendChild(this); if (d.parent) { moveStackToFront(d.parent); } }) } }

提前致谢！

Answer 1

替换这个“root = d3.hierarchy(root); root.sum(d => d.size);” 用下面的代码

var root = d3.hierarchy(root, function(d) { return d.children }) .sum( 函数 (d) {
如果（d.children）{ 返回 0 } 别的 { 返回 1 } });