Столбчатая диаграмма с переходом между двумя наборами данных - PullRequest
Новая
       9

Столбчатая диаграмма с переходом между двумя наборами данных

0 голосов
/ 04 апреля 2020

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

const bars = chart.append("g")
  .selectAll("g")
  .data(series1)
  .join("g")
    .attr("fill", d => colorScale(d.key))
  .selectAll("rect")
  .data(d => d)
  .join("rect")
    .attr("x", d => xScale(d[0]))
    .attr("y", d => yScale(d.data.year))
    .attr("width", d => xScale(d[1]) - xScale(d[0]))
    .attr("height", yScale.bandwidth())

function transition(data) {
  bars.selectAll("g")
    .data(data)
    .join("g")
    .data(d => d)
    .join("rect")
      .attr("x", d => xScale(d[0]))
      .attr("width", d => xScale(d[1]) - xScale(d[0]))
}

d3.selectAll("input")
  .on("change", update)

function update() {
  if(this.value === "two") transition(series2);
  else transition(series1);
}

Поскольку метод d3.stack () вкладывает данные определенным образом, у меня возникают проблемы с доступом к внутреннему вложенному элементу. частей. Я пробовал множество вариантов удаления .join и .selectAll из функции перехода, но, похоже, не могу найти правильную структуру. Вот JSFiddle со всеми компонентами: https://jsfiddle.net/bronna217/ba71ndfp/59/

...