如何在 D3 中使用我的序号将自制的三角形放置在特定位置？

Question

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

如果需要，我有一个 fiddle 和我当前的解决方案：http://jsfiddle.net/c794g977/9/

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

Answer 1

最简单的方法是使用 symbol.type。

你的 fiddle 差不多了，但你输入的选择是：

svg.selectAll("path")

"specific" 不够。

尝试：

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

已更新 fiddle here。

如何在 D3 中使用我的序号将自制的三角形放置在特定位置？

How do I place my self-made triangle on a specific location with my ordinal scale in D3?

html

javascript

css

svg

d3.js