Javascript 我如何用D3中的顺序标度将自制三角形放置在特定位置？

我已经在D3中创建了一个三角形作为数据元素，并希望将其放置在图形的某些位置上。我如何才能正确处理这个问题

triangleData = [ { "x": 1,  "y": 20}, { "x": 11,   "y": 5},
              { "x": 21,  "y": 20}, { "x": 1,  "y": 20}];

lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("monotone");

triangle = svgbody.append("path")
    .attr("class", "triangleNodes")
    .attr("d", lineFunction(triangleData))
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "blue");

如果需要，我可以在这里修改当前的解决方案：

---

我还想对这个三角形应用缩放，以便缩放功能与svg中的其他对象相同。对此的任何建议也将受到欢迎！提前谢谢

最简单的方法是使用

您的小提琴几乎已经有了它，但您可以输入以下选项：

svg.selectAll("path")

还不够“具体”

尝试：

---

var triangle=svg.selectAll（“.triangle”）//您的小提琴和代码相互矛盾。您想用
d3.svg.line（）
或使用
d3.symbol.type（）
绘制三角形吗？谢谢您的回答。很抱歉把小提琴的代码和贴在这里的代码搞混了。这是因为我试着用d3创建一个三角形，用path创建一个！这太棒了！非常感谢你！我只有一个问题。为什么这段代码中没有更新？如果我想更新图形，我知道我需要一个输入选择来创建数据量的dom元素，然后使用更新选择来指定坐标、样式等@Vanquiza，很抱歉我错过了zoom的更新，请看这里的小提琴：是的，谢谢你，不过我自己解决了这个问题。看了你是如何把三角形放在第一位的，不难理解。我感谢你的帮助！
var triangle = svg.selectAll(".triangle") // <-- specific to these paths
    .data(["D", "P"]);

triangle.exit()
    .style("opacity", 1)
    .transition()
    .duration(500)
    .style("opacity", 0)
    .remove();

triangle.enter()
    .append('path')
    .attr('class','triangle') //<-- assign the class
    .attr("transform", function(d) { 
        return "translate(" + x(d) + "," + y(statusText) + ")"; 
     })
    .attr("d", d3.svg.symbol().type("triangle-up"));