How to draw the triangle symbol?

Question

I am trying to implement the triangle example yet it fails with d3 v4 for me

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

var group         


        

Answer 1

Instead of...

type("triangle")

... it has to be:

type(d3.symbolTriangle)

Here is the list of the symbols in D3 v4.x.

And here is the demo:

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>

The same code, rotating the triangles (as you asked in 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>