How to draw a triangle symbol?
I am trying to implement a triangle example but it doesn't work with d3 v4 for me
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)"; });
Mistake:
Uncaught TypeError: type.apply (...). draw is not a function
+3
source to share
1 answer
Instead...
type("triangle")
... it should be:
type(d3.symbolTriangle)
Here is a list of symbols in D3 v4.x.
And here's a 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 triangles (as you requested 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>
+6
source to share