D3.js 在d3中绘制三角形的惯用方法

我有以下代码在d3中绘制三角形：

var trianglePoints = xScale(3) + ' ' + yScale(18) + ', ' + xScale(1) + ' ' + yScale(0) + ', ' + xScale(12) + ' ' + yScale(3) + ' ' + xScale(12) + ', ' + yScale(3) + ' ' + xScale(3) + ' ' + yScale(18);

console.log(trianglePoints);

svg.append('polyline')
    .attr('points', trianglePoints)
    .style('stroke', 'blue');

下面是一个例子，说明了它的作用

---

我很想知道这是d3中最好的方法还是有更好的方法？

d3的创建者迈克·博斯托克认为你所做的是最好的方法：

是的，我可能会在这里使用带有自定义“d”属性的path元素

另一个用于绘制三角形的选项，但更多用于 散点图，即使用d3.svg.symbol。请参阅此处的文档：

正如Kyle R所述，绘制散点图中使用的各种符号有一种方法。如果您只对绘制等边三角形感兴趣，则可以使用这种方法

该函数可以这样使用：

svg.append("path")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
    .attr("d", d3.svg.symbol().type("triangle-up"));

您还可以设置符号的大小：通过附加函数调用

size（100）

也就是说，如果你想画一个不同形式的三角形，你可以：

绘制一个

path

元素并使用

d

属性

使用

点

属性绘制

多边形

或

多段线

（如您在示例中所做）

用于

d

属性。我已经用你的电脑演示了。关键代码段如下所示：

svg.append('path')
    .attr('d', function(d) { 
      var x = xScale(3), y = yScale(18);
      return 'M ' + x +' '+ y + ' l ' + xScale(10) + ' ' + yScale(10) + ' l ' + -xScale(10) + ' ' + yScale(20) + ' z';
    })
    .style('stroke', 'blue');

---

另一个使用v4的示例：

一些注意事项：

• 形状的大小似乎是一个区域
• 形状以[0,0]为中心

上面的示例尝试平移等边三角形的顶点，而不是中心，因此额外的量将被平移到变换的“y”部分

var color = "green";
var triangleSize = 25;
var verticalTransform = midHeight + Math.sqrt(triangleSize);

var triangle = d3.symbol()
            .type(d3.symbolTriangle)
            .size(triangleSize)
;

svg.append("path")
            .attr("d", triangle)
            .attr("stroke", color)
            .attr("fill", color)
            .attr("transform", function(d) { return "translate(" + xScale(currentPrice) + "," + yScale(verticalTransform) + ")"; });
    ;