Question

我目前正在制作可缩放的d3.v5朝阳图。由于我的json文件很大，因此并非所有数据都应立即呈现。单击弧时，将加载子级弧。但是，单击弧时，补间不会进行正确的过渡。如果单击圆弧“ A”，则结果是补间不会完全扩展A，而是补间，以便新的子代适合。如何固定过渡？'

html文件： https://raw.githubusercontent.com/ViktorLindholm/Sunburst-diagram/master/1.1/index.html

json文件： https://raw.githubusercontent.com/ViktorLindholm/Sunburst-diagram/master/1.1/icd-10-3.json

解决问题的

html文件，但是，我无法添加标签： https://raw.githubusercontent.com/ViktorLindholm/Sunburst-diagram/master/1.0/index.html

我尝试在更新之前保存根的副本：在addThirdLevel最后： rootcopy = root.children [keyIndex [0]] 更新（tempJSON）回调（rootcopy）

但是，这将使过渡过渡到远，从而不会显示所有新的子代。我还尝试调整更新，以便它可以读取正确的数据。

function update(tempJSON){
        root = d3.hierarchy(tempJSON);
        root.sum(function(d) {
            if (typeof d.children != "undefined")
              return 0 
          else return 1; });
        partition(root);
        var slice = svg.selectAll('g')
        .data(partition(root).descendants());

          slice.exit().remove();

          let newSlice = slice.enter()
          .data(partition(root).descendants())
          .append('g').attr('class', 'slice')
          .on('click', d => {
            focusOn(d);
        });

          newSlice.append('title')
          .text(d => d.data.code + '\n');

          newSlice.append('path')
          .attr('class', 'main-arc')
          .style('fill', d => color((d.children ? d : d.parent).data.code))
          .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 : 'none');

          text.append('textPath')
          .attr('startOffset','50%')
          .attr('xlink:href', (_, i) => `#hiddenArc${i}` )
          .text(d => d.data.code)
          .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.code);
      }

我需要在单击时进一步过渡到补间。

为什么d3补间不从朝阳图中的新数据过渡？

0 个答案: