d3.symbol D3.js符號生成器

d3.symbol D3.js符號生成器

api版本 5.X

d3中有7個符號生成器。

1. symbolCircle 圓形
2. symbolCross 十字架
3. symbolDiamond 菱形
4. symbolSquare 正方形
5. symbolStar 五角星
6. symbolTriangle 三角形
7. symbolWye Y形

內置這幾個形狀有什麼用啊，太簡單了。

下面我們來繪製一個五角星

this.svg.append('g')
        .attr("transform", "translate(" + this.pieCenterX + "," + this.pieCenterY + ")")
        .append('path')
        .attr('d',d3.symbol().type(d3.symbolStar).size(400))
        .attr('fill','red')

.type :參數是上面寫的7中形狀
.size：單位是像素的平方，默認是64就是8*8的大小。
繪製的結果是一個紅色的五角星。

注意d3.symbol().type(d3.symbolStar).size(400)這種寫法是5.X的，前面幾個版本不這樣寫。