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

D3的创造者Mike Bostock认为你所做的是最好的方法： https://groups.google.com/forum/#!topic/d3-js/kHONjIWjAA0

是的，我可能会使用带有自定义＆＃34; d＆＃34;的路径元素。属于这里。

绘制三角形的另一种选择，但更多用于绘制   scatterplots，是使用d3.svg.symbol。请参阅此处的文档：

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol

Answer 2

有一个inbuilt convenience function用于绘制Scatterplots中使用的各种符号，如Kyle R.所述。如果您只想绘制等边三角形，那么可以使用它。

该功能可以这样使用：

size(100)

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

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

绘制d元素并使用polygon属性。 Path element explained。
使用polyline属性绘制points或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');属性。我已经将您的JS Bin分叉进行演示了。关键片段如下：

{{1}}

Answer 3

使用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]

上面的例子试图转换等边三角形的顶点而不是中心，因此额外的数量是＆＃34; y＆＃34;翻译的一部分。

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

3 个答案: