Нечетная анимация p ie с D3 - PullRequest
Новая
       21

Нечетная анимация p ie с D3

0 голосов
/ 26 марта 2020

Я пытаюсь создать то, что я думал, было бы простым переходом для графика ap ie. Тем не менее, он не ведет себя так, как должен, и делает действительно странную анимацию. 

const width = 502;
const height = 340;
const radius = 129;
const circleMargin = 1;

const svg = d3.select('#something')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

createCircle(svg, 'one', [100], ['#0f0'], 'left');
createCircle(svg, 'two', [100, 0], ['#ff0', '#0ff'], 'right');
setTimeout(() => update(), 2000);

function update() {
  const g = svg.select('g.two');
  setPie(g, [50, 50], ['#ff0', '#0ff'])
}

function createCircle(svg, name, data, colors, position) {
  const x = position === 'right' ?
    width - radius - circleMargin :
    radius + circleMargin;
  const y = height - radius - circleMargin;

  const g = svg
    .append('g')
    .attr('class', name)
    .attr('transform', `translate(${x}, ${y})`);

  setPie(g, data, colors);
}

function setPie(g, data, colors) {
    const color = d3.scaleOrdinal()
      .domain(data)
      .range(colors);
    const pie = d3.pie()
      .value(d => d.value)
      .sort(null);
    const dataReady = pie(d3.entries(data));

    const arc = g
      .selectAll('path')
      .data(dataReady);

    arc
      .enter()
      .append('path')
      .merge(arc)
      .transition()
      .duration(1000)
      .attr('d', d3.arc()
        .innerRadius(54)
        .outerRadius(radius)
      )
      .attr('fill', (d) => color(d.data.key))
      .style('stroke-width', '0');

    arc
      .enter()
      .append('path')
      .attr('fill', '#000')
      .attr('d', d3.arc()
        .innerRadius(radius)
        .outerRadius(radius + 1)
      );
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="something"></div>

Я уверен, что что-то пропустил или сделал что-то действительно глупое, но не могу найти, что это такое.

...