Javascript 把一行放在前面

我想在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")

---

这是关于

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");
}

在回调中，您可以使用此引用按所需顺序追加元素。把所有这些放在一起，你会得到如下结果：

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>

---

无需将函数

dataViz（）

包装到另一个匿名箭头函数中；只要传入对它的引用，D3将负责调用它。

这是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");
}

在回调中，您可以使用此引用按所需顺序追加元素。把所有这些放在一起，你会得到如下结果：

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>

---

无需将函数

dataViz（）

包装到另一个匿名箭头函数中；只需将引用传递给它，D3将负责调用它。

你能创建一个吗？你能创建一个吗？亲爱的altocumulus，首先感谢你的回答。在给stackoverflow写信之前，我已经尝试了您建议的解决方案，但它不起作用。这是因为我试图使用MoveOnFront属性。不恰当地。。。。我确实有点迷路了……亲爱的高积云，首先谢谢你的回答。在给stackoverflow写信之前，我已经尝试了您建议的解决方案，但它不起作用。这是因为我试图使用MoveOnFront属性。不恰当地。。。。我确实有点迷路了。。。