javascript - 将 SVG 线置于前面

Question

我想在我的 SVG 中添加一些圆圈和圆圈上方的红线。然而，无论它们以何种顺序附加:我总是将行放在后面。

如何将其置于前面？我尝试使用 moveToFront 和 z 轴属性，但无法修复它。

我的暂定:

d3.select("svg")
  .append("g")
  .attr("id", "chart")
  .attr("width", width)
  .attr("height", height)

filename = "assets/sources/datafile.csv"
d3.csv(filename, d => dataViz(d));

function dataViz(input_data) {
  d3.select("svg")
    .selectAll("circle")
    .data(input_data)
    .enter()
    .append("circle")
}
d3.select("#chart")
  .append('line')
  .attr("id", "avg_line")
  .attr("x1", xScale(0))
  .attr("y1", yScale(3.75))
  .attr("x2", xScale(upper_limit))
  .attr("y2", yScale(3.75))
  .attr("stroke-width", 5)
  .attr("stroke", "red")

Answer 1

这是 d3.json 上一个著名主题的有趣变体。 !自 d3.json是异步，在加载完成之前不会调用回调。尽管对追加行的调用似乎位于追加圆圈之后，但它实际上会立即执行，即在追加圆圈之前，在任何情况下都将线定位在圆圈下方。解决方案是在附加圆圈后将行附加到回调内部。

function dataViz(input_data) {
  d3.select("svg")
    .selectAll("circle")
    .data(input_data)
    .enter()
    .append("circle")

  d3.select("#chart")   // <-- This should be inside the callback.
    .append('line')
      .attr("id","avg_line")
      .attr("x1", xScale(0))
      .attr("y1", yScale(3.75))
      .attr("x2", xScale(upper_limit))
      .attr("y2", yScale(3.75))
      .attr("stroke-width",5)
      .attr("stroke","red");
}

另一个错误在于您选择要附加到的元素的方式。上面更正后的代码将生成以下结构:

<svg>
  <g id="chart" width="" height="">
    <line id="avg_line" x1="" y1="" x2="" y2="" stroke-width="5" stroke="red"></line>
  </g>
  <circle></circle>
</svg>

这是因为您首先附加 <g id="chart">到<svg>仅附加该行。另一方面，圆圈被附加到 <svg>本身。看看这个结构就很明显了，为什么这条线仍然位于圆圈后面。

鉴于您尚未提供完整的代码，我无法确定最好的解决方案是什么。然而，自从 <g> 只是一个容器元素，它没有width和height属性，第一条语句应该放弃 .append("g") 。另一方面，因为svg是您要附加到的元素，最好保留对它的引用，这也使您不必重复重新选择同一元素:

var svg = d3.select("svg")   // Keep the reference to the <svg> for later use.
    .attr("id", "chart")
    .attr("width",width)
    .attr("height",height);

在回调中，您可以使用此引用以所需的顺序附加元素。将所有这些放在一起，您最终会得到如下所示的结果:

var svg = d3.select("svg")
    .attr("id", "chart")
    .attr("width",width)
    .attr("height",height);

filename="assets/sources/datafile.csv"

d3.csv(filename, dataViz);

function dataViz(input_data) {
  svg.selectAll("circle")
    .data(input_data)
    .enter()
    .append("circle")

  svg.append('line')
      .attr("id","avg_line")
      .attr("x1", xScale(0))
      .attr("y1", yScale(3.75))
      .attr("x2", xScale(upper_limit))
      .attr("y2", yScale(3.75))
      .attr("stroke-width",5)
      .attr("stroke","red");
}

生成的 SVG 结构如下所示，将线条渲染在任何圆上方:

<svg id="chart" width="" height="">
  <circle></circle>
  <line id="avg_line" x1="" y1="" x2="" y2="" stroke-width="5" stroke="red"></line>
</svg>

<小时/>

专业提示与您的问题无关:

请注意，我如何简化您对 d3.csv() 的调用。以下两个陈述基本上是等价的(好吧，在我受到严厉批评之前，这并不完全正确，但在一阶近似中它们是正确的):

d3.csv(filename, d => dataViz(d));
d3.csv(filename, dataViz);

无需包装您的函数 dataViz()在另一个匿名箭头函数中；只需传递对它的引用，D3 将负责调用它。