Question

我使用了root = d3.hierarchy（root）; root.sum（d =＆gt; d.size）;

在我的json中我没有子节点的大小值，如何生成适当的d3 Zoomable旭日形象可视化？

这是我的代码

const width = window.innerWidth，height = window.innerHeight，   maxRadius =（Math.min（width，height）/ 2） - 5;

const formatNumber = d3.format（＆＃39;，d＆＃39;）;

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 =＆gt; x（d.x0））。endAngle（d =＆gt; x（d.x1））   .innerRadius（d =＆gt; Math.max（0，y（d.y0）））.outerRadius（d =＆gt; Math.max（0，   Y（d.y1）））;

const middleArcLine = d =＆gt; {const halfPi = Math.PI / 2; const角度=   [x（d.x0） - halfPi，x（d.x1） - halfPi]; const r = Math.max（0，（y（d.y0）+   y（d.y1））/ 2）;

const middleAngle =（angles [1] + angles [0]）/ 2; const invertDirection   = middleAngle＆gt; 0＆amp;＆amp; middleAngle＆lt; Math.PI; //在下象限上写入文本ccw if（invertDirection）{angles.reverse（）; }

const path = d3.path（）; path.arc（0,0，r，角度[0]，角度[1]，   invertDirection）; return path.toString（）; };

const textFits = d =＆gt; {const CHAR_SPACE = 6;

const deltaAngle = x（d.x1） - x（d.x0）; const r = Math.max（0，（y（d.y0）+   y（d.y1））/ 2）; const周长= r * deltaAngle;

返回d.data.name.length * CHAR_SPACE＆lt;周长; };

const svg = d3.select（＆＃39; body＆＃39;）。追加（＆＃39; svg＆＃39;）。style（＆＃39; width＆＃39;，＆＃39; 100vw＆＃39; ;）   .style（＆＃39; height＆＃39;，＆＃39; 100vh＆＃39;）。attr（＆＃39; viewBox＆＃39;，${-width / 2} ${-height / 2} ${width} ${height}）。on（＆＃39;点击＆＃39; ，（）=＆gt; focusOn（））; //重置缩放   在画布上点击

d3.json（＆＃39; dummy3Copy.json＆＃39;，（error，root）=＆gt; {if（error）throw error;   //启动自定义代码

//结束自定义代码root = d3.hierarchy（root）; root.sum（d =＆gt;   d.size）;

const slice = svg.selectAll（＆＃39; g.slice＆＃39;）   。数据（分区（根）.descendants（））;

slice.exit（）除去（）;

const newSlice = slice.enter（）。append（＆＃39; g＆＃39;）。attr（＆＃39; class＆＃39;，＆＃39; slice＆＃39;）   .on（＆＃34; mouseover＆＃34;，mouseover）.on（＆＃34; mouseout＆＃34;，mouseOutArc）.on（＆＃39;点击＆＃39;，   d =＆gt; {d3.event.stopPropagation（）; focusOn（d）; }）;

newSlice.append（＆＃39; title＆＃39;）。text（d =＆gt; d.data.name +＆＃39; \ n＆＃39; + d.data.id）;   //.on("mouseover" ;, mouseover）;

newSlice.append（＆＃39;路径＆＃39;）。attr（＆＃39; class＆＃39;，＆＃39; main-arc＆＃39;）。style（＆＃39; fill＆＃39; ，d =＆gt;   color（（d.children？d：d.parent）.data.name））。attr（＆＃39; d＆＃39;，arc）;

newSlice.append（＆＃39;路径＆＃39;）。attr（＆＃39; class＆＃39;，＆＃39; hidden-arc＆＃39;）。attr（＆＃39; id＆＃39; ，（_，   i）=＆gt; hiddenArc${i}）。attr（＆＃39; d＆＃39;，middleArcLine）;

const text = newSlice.append（＆＃39; text＆＃39;）。attr（＆＃39; display＆＃39;，d =＆gt; textFits（d）   ？ null：＆＃39; none＆＃39;）;

//添加白色轮廓text.append（＆＃39; textPath＆＃39;）   .attr（＆＃39; startOffset＆＃39;，＆＃39; 50％＆＃39;）。attr（＆＃39; xlink：href＆＃39;，（_，i）=＆gt;   #hiddenArc${i}）。text（d =＆gt; d.data.name）.style（＆＃39; fill＆＃39;，＆＃39; none＆＃39;）   .style（＆＃39; stroke＆＃39;，＆＃39; #ffff＆＃39;）。style（＆＃39; stroke-width＆＃39;，5）   .style（＆＃39; stroke-linejoin＆＃39;，＆＃39; round＆＃39;）;

text.append（＆＃39; textPath＆＃39;）。attr（＆＃39; startOffset＆＃39;，＆＃39; 50％＆＃39;）。attr（＆＃39; xlink：href＆＃ 39 ;,   （_，i）=＆gt; #hiddenArc${i}）。text（d =＆gt; d.data.name）; }）;

var tooltip = d3.select（＆＃34; body＆＃34;）       .append（＆＃34; DIV＆＃34）       .attr（＆＃34; id＆＃34;，＆＃34; tooltip＆＃34;）       .style（＆＃34; position＆＃34;，＆＃34; absolute＆＃34;）       .style（＆＃34; z-index＆＃34;，＆＃34; 10＆＃34;）       .style（＆＃34; opacity＆＃34;，0）;

function format_description（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);
} function mouseOutArc（）{       d3.select（本）.attr（＆＃34;中风＆＃34;＆＃34;＆＃34）       return tooltip.style（＆＃34; opacity＆＃34;，0）; function focusOn（d = {x0：0，x1：1，y0：0，y1：1}）{//如果没有数据点，则重置为顶级   指定的

const transition = svg.transition（）。duration（750）.tween（＆＃39; scale＆＃39;，（）   =＆GT; {const xd = d3.interpolate（x.domain（），[d.x0，d.x1]），yd = d3.interpolate（y.domain（），[d.y0,1]）; return t =＆gt; {x.domain（xd（t））;   y.domain（码（T））; }; }）;

transition.selectAll（＆＃39; path.main-arc＆＃39;）。attrTween（＆＃39; d＆＃39;，d =＆gt;（）=＆gt;   弧（d））;

transition.selectAll（＆＃39; path.hidden-arc＆＃39;）。attrTween（＆＃39; d＆＃39;，d =＆gt;（）=＆gt;   middleArcLine（d））;

transition.selectAll（＆＃39; text＆＃39;）。atTTween（＆＃39; display＆＃39;，d =＆gt;（）=＆gt;   textFits（d）？ null：＆＃39; none＆＃39;）;

moveStackToFront（d）;

//

function moveStackToFront（elD）{svg.selectAll（＆＃39; .slice＆＃39;）。filter（d =＆gt; d   === elD）.each（function（d）{this.parentNode.appendChild（this）; if（d.parent）{moveStackToFront（d.parent）;}}）}}

提前致谢！

Answer 1

替换此“root = d3.hierarchy（root）; root.sum（d =＆gt; d.size）;” 以下代码

var root = d3.hierarchy（root，function（d）{return d.children}）       .sum（函数（d）{
                  if（d.children）{                       返回0                   } else {                       返回1                   }}）;

在json文件{child}中的子节点中没有定义大小的Zoomable sunburst可视化

1 个答案: