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

如果需要，我可以使用我当前的解决方案：http://jsfiddle.net/c794g977/9/

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

Answer 1

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

你的小提琴几乎有它，但你的输入选择：

svg.selectAll("path")

不够“具体”。

尝试：

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

更新了小提琴here。

如何将我自制的三角形放在D3的有序刻度的特定位置？

1 个答案: