在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

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

是的,我可能在这里使用带有自定义"d"属性的路径元素.

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

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

Answer 2

有一个内置的便利功能,用于绘制Scatterplots中使用的各种符号,如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).

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

1. 绘制一个path元素并使用该d属性.路径元素解释.
2. 绘制一个polygon或polyline一个points属性(就像你在你的例子中所做的那样).

用于d属性.我已经分叉你的JS Bin进行演示了.关键片段如下:

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

Answer 3

使用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]为中心

上面的例子试图转换等边三角形的顶点而不是中心,因此额外的数量转换为trans的"y"部分.