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

Question

我有以下代码在 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');

这是一个jsbin这显示了它的实际效果。

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

Answer 1

使用 shape symbols v4 的另一个示例:

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

一些注意事项:

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

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