如何绘制三角形符号? [英] How to draw the triangle symbol?
本文介绍了如何绘制三角形符号?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试实现三角形示例,但是对于我来说,它的d3 v4版本失败了
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 = 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)"; });
错误:
未捕获的TypeError:type.apply(...).draw不是函数
Uncaught TypeError: type.apply(...).draw is not a function
推荐答案
而不是...
type("triangle")
...它必须是:
type(d3.symbolTriangle)
这是列表中的符号 D3 v4.x.
Here is the list of the symbols in 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>
相同的代码,旋转三角形(如您在评论):
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>
这篇关于如何绘制三角形符号?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文