Jquery 如何使用d3.js在直线图中的直线上获得标签

看一看哪个显示了使用

svg:textPath

标记路径。该示例显示了一个通用的曲线路径，但它应该同样容易地应用于line元素。

我接受@Alex answer沿路径写入文本。。但是

您显示的示例是一个多行图形，它在末尾逐个绘制线条和文本

同样，您尝试逐个手动包含行。。在这种情况下，您需要在绘制每一行后以相同的方式逐个追加文本

graph.append("svg:path").attr("d", line(json))
 .append("svg:g")
 .append("text")
 .attr("x", 10)
 .attr("y",10)
 .text("text");

这不会在结尾追加文本。。。相反，试试这样的东西

graph.append("svg:path").attr("d", line(json))
        .append("svg:g")
        .append("text")
        .attr("x", 10)
        .attr("y",10)
        .text("text");

我会向你解释我到底做了什么

graph.append("svg:path").attr("d", line2(json)).style("stroke", "green");



graph.append("text")
      .datum(function(d) { return {value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," +       y(d.value.yvalue) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text("Text");

我返回最后一个点（x，y）的值。。这将根据您的json格式进行更改。。 这里（价值观）是我的一把钥匙

.datum(function(d) { return {value: d.values[d.values.length - 1]}; })

它将文本转换为最后一个（x，y）值。。。它提供在路径（行）末尾追加文本的所需输出

希望有帮助

这是根据您的json编写的代码。它可以工作。请检查它

.attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," +       y(d.value.yvalue) + ")"; })

---

有一个d3选项——这可能是将来与你的d3.js共享/试验的一个好方法。我在第1行上尝试过，它没有显示任何文本，我尝试过，它给了我“未定义的值”。如何找到示例中最后一个点的坐标？我没看到，你能给我链接吗

.attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," +       y(d.value.yvalue) + ")"; })

    linesGroup.append("text")
      .datum(function(d) {return linedata.points[0] ; })
        .attr("transform", function(d) {console.log(d);console.log("translate(" + x(d.created_at) + "," + y(d.rate) + ")"); return "translate(" + x(d.created_at) + "," +       y(d.rate) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
    .text(function(d){return (d.tag);});

};