更改图形的符号

Question

我想将符号类型从圆形更改为三角形、正方形和其他符号。

svg.selectAll().
data(data).enter()
.append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return timeScale(d.year); })
.attr("cy", function(d, i) { return yScale(d.sale) })
.style("fill", "#FFC300")
.attr("r", function(d) {return est_size(d.est)})

如果我将.append("circle")更改为.append("triangle")，图表不显示该符号。如何显示三角形而不是圆形？

Answer 1

SVG 没有用于triangle的元素类型 - 最基本的形状是rect和circle(也有路径、多边形、椭圆等，但没有三角形(。但是，我们有一些选择，我们可以使用 d3 符号(此处列出的可用符号(，或者我们可以创建自己的符号并使用它。

对于使用 d3 符号，我们可以执行以下操作：

var width = 500;
var height = 300;
var data = d3.range(10)
.map(function(d) { return { x: Math.random()*width, y: Math.random()*height }; })

var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);

svg.selectAll(".symbol")
.data(data)
.enter()
.append("path")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(50))
.attr("transform",function(d) { return "translate("+[d.x,d.y]+")" })
.attr("class","symbol");
// For demonstrating that the triangles are centered:
svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 3)
.attr("fill","orange")
.attr("transform",function(d) { return "translate("+[d.x,d.y]+")" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

symbol.size 对应于形状面积，而不是边缘长度

或者，我们可以创建一个函数，它自己返回一个基本的三角形多边形，并将其与selection.append()一起使用：

var width = 500;
var height = 300;
var data = d3.range(10)
.map(function(d) { return { x: Math.random()*width, y: Math.random()*height }; })

var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);

var symbol = function() {
// Hand drawn triangle:
return d3.create('svg:path').attr("d","M0,8L-5,-3L5,-3Z").node()
}


svg.selectAll(".symbol")
.data(data)
.enter()
.append(symbol) // append can accept a function.
.attr("transform",function(d) { return "translate("+[d.x,d.y]+")" })
.attr("class","symbol");
// For demonstrating that the triangles are centered:
svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 3)
.attr("fill","orange")
.attr("transform",function(d) { return "translate("+[d.x,d.y]+")" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

我们也可以采取一些其他方法，例如使用 svgsymbol元素，但上述两种方法应该足够了。