Question

我使用D3.js JavaScript库绘制图表。我想在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}, ...]]

要绘制线条，我使用以下算法：选择具有类<g >的DOM元素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)
}

Example on JSFiddle

但是当我运行它时，出现错误：TypeError: this.removeAttribute is not a function。这是绘制图表的标准代码模式，无法理解我在做什么错吗？

Answer 1

对于更新图表，Mike Bostock有一个关于General Update Pattern的3部分系列文章。我已经链接了第1部分。

关于您的图表我made some updates to your fiddle。

您可以看到我添加了

  .append('path')

进入您的.enter()语句以给出此信息：

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

append语句很重要，因为d3每次看到新数据集时都应该附加该语句。我还添加了stroke颜色，使线条可见。

在d3中添加行时，不需要遍历数组并为每个索引添加一行。 d3将为您处理循环并为每个数组索引添加新行。

d3.js在元素内绘制两条线

1 个答案: