d3.js рисует две линии внутри элемента

Question

Я использую библиотеку JavaScript D3.js для рисования диаграмм.Я хочу нарисовать две диаграммы в SVG, внутри тега <g>.Мой HTML выглядит так:

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 970 580">
  <g style="transform: translate(40px, 20px);" class="stage">
  </g>
</svg>

Графики должны быть определены элементом <path> с атрибутом line.Мой массив данных представляет собой вложенный массив:

const data = [[{x: 1, y: 3.4}, ...], [{x: 1, y: 4.3}, ...]]

Для рисования линий я использую следующий алгоритм: выберите элемент DOM <g > с классом stage и добавьте элемент <path> с атрибутом line.Мой код выглядит так:

const $stage = d3.select('.stage')
const line = d3.line().curve(d3.curveBasis).x(d => scale.x(d.x)).y(d => scale.y(d.y))

for (chartData of data) {
    const $line = $stage.selectAll('path').data(chartData)

    $line.enter().attr('d', line).style('fill', 'none').style('stroke-width', 2)
}

Пример на JSFiddle

Но когда я запускаю его, я получаю сообщение об ошибке: TypeError: this.removeAttribute is not a function.Это стандартный шаблон кода для рисования, не можете понять, что я делаю неправильно?

Answer 1

Для обновления графиков у Майка Бостока есть 3 серии статей о General Update Pattern .Я связал часть 1.

Что касается вашей диаграммы, я сделал некоторые обновления для вашей скрипки .

Как вы можете видеть, я добавил

  .append('path')

в ваш оператор .enter(), чтобы дать это:

$line
 .enter()
 .append('path')
 .attr('d', line)
 .style('fill', 'none')
 .style('stroke', 'black')
 .style('stroke-width', 2);

Оператор добавления важен, поскольку именно к нему следует добавлять d3 каждый раз, когда видит новый набор данных.Я также добавил цвет stroke, чтобы линии были видны.

При добавлении строк в d3 не требуется перебирать массив и добавлять строки для каждого индекса.d3 обработает за вас цикл и добавит новую строку для каждого индекса массива.