Почему d3 tween не переходит с новых данных на диаграмму солнечных лучей? - PullRequest
Новая
       46

Почему d3 tween не переходит с новых данных на диаграмму солнечных лучей?

0 голосов
/ 19 мая 2019

Сейчас я делаю масштабируемую диаграмму солнечных лучей d3.v5. Так как мой файл json большой, не все данные должны отображаться одновременно. При щелчке по дуге будут загружаться дочерние элементы дуг. Однако при щелчке по дуге анимация не выполняет правильный переход. Если щелкнуть дугу «А», результатом будет анимация, которая не полностью расширяет А, а вместо этого анимацию, чтобы подгонялись новые дочерние элементы. Как можно исправить переход? '

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);
      }

Мне нужен переход к анимации движения при нажатии.

...