时间戳

首页 > 解决方案 > 每次使用 d3 selection.join 创建一个新行

d3.js - 每次使用 d3 selection.join 创建一个新行

问题描述

在selection.join的 d3 示例中，似乎假设您已经有了操作路径：

svg.selectAll("path")
    .data([dataset])
    .join(
      enter => enter.append("path").attr("class", "line"),
      update => update,
      exit => exit.remove()
    )
    .attr("d", line);

但是，我想创建一个可重用的类组件，每次为该特定数据创建一个新行。它不应干扰整个图中可能存在或不存在的其他路径。

const lineGenerator = d3
  .line<DataPoint>()
  .y((d) => yScale(d.value))
  .x((d) => xScale(d.date));

mainSvg.selectAll('path')
  .data([data])
  .join(
    enter =>
      enter
      .append('path')
      .attr('class', 'line')
      .attr('stroke', 'black'),
  ).attr('d', lineGenerator)

我现在看到在某处已经有路径的图表中发生的是，该事件被这条新线替换。您通常如何在 d3 中解决这个问题？

标签： d3.js

解决方案

找到了可能的解决方案。不确定这是否是要走的路：

const lineGenerator = d3
  .line<DataPoint>()
  .y((d) => yScale(d.value))
  .x((d) => xScale(d.date));

mainSvg.selectAll('#my-unique-id')
  .data([data])
  .join(
    enter =>
      enter
       .append('path')
       .attr('id', 'my-unique-id')
       .attr('stroke', 'black'),
  ).attr('d', lineGenerator)

看起来您可以选择不存在的东西。如果 d3 找不到该事件，它将创建该实例。

为新路径使用唯一 ID，您可以确保仅重绘您想要定位的出现。

我不确定这种方法是否有任何警告，所以任何提示都值得赞赏。

推荐阅读