javascript - 如何绘制三 Angular 形符号？

Question

我正在尝试实现 the triangle example但它对我来说 d3 v4 失败了

triangles = [];
triangles.push({x : 250});
triangles.push({x : 350});

var group = svgContainer.append('g').attr('transform','translate('+ xOffset +','+ 30 +')');
var arc = d3.symbol().type('triangle');

var line = group.selectAll('path')
            .data(triangles)
            .enter()
            .append('path')
            .attr('d',arc)
            .attr('fill','red')
            .attr('stroke','#000')
            .attr('stroke-width',1)
            .attr('transform',function(d){ return "translate("+(d.x)+",0)"; }); 

错误:

Uncaught TypeError: type.apply(...).draw is not a function

Answer 1

而不是...

type("triangle")

...它必须是:

type(d3.symbolTriangle)

这里是 the list D3 v4.x 中的符号。

这是演示:

var svg = d3.select("svg");

triangles = [];
triangles.push({
  x: 150
});
triangles.push({
  x: 50
});

var arc = d3.symbol().type(d3.symbolTriangle);

var line = svg.selectAll('path')
  .data(triangles)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', 'red')
  .attr('stroke', '#000')
  .attr('stroke-width', 1)
  .attr('transform', function(d) {
    return "translate(" + d.x + ",30)";
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

相同的代码，旋转三 Angular 形(如您在 your comment 中所问):

var svg = d3.select("svg");

triangles = [];
triangles.push({
  x: 150
});
triangles.push({
  x: 50
});

var arc = d3.symbol().type(d3.symbolTriangle);

var line = svg.selectAll('path')
  .data(triangles)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', 'red')
  .attr('stroke', '#000')
  .attr('stroke-width', 1)
  .attr('transform', function(d) {
    return "translate(" + d.x + ",30) rotate(180)";
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>