如何使用d3.js制作虚线图例 [英] How to make a dashed line legend with d3.js
本文介绍了如何使用d3.js制作虚线图例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我通常通过添加rect
使其具有非常小的高度,以使其看起来像线条,来制作线条图例.
I usually make a line legend by appending a rect
giving it a very small height so that it looks like a line.
但是现在我需要一个虚线图例.我无法以旧方式做到这一点.谁能给我展示一个简单的示例,说明如何使用d3.js和append('path')
制作线条图例?
But now I need a dashed line legend. I am not able to do it by my old way. Can anyone show me a quick example of how to make a line legend with append('path')
with d3.js?
推荐答案
您可以使用line
DOM做到这一点:
You can make it like this with a line
DOM:
var legend = svg.selectAll(".legend")
.data(ageNames.slice().reverse())//data set for legends
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("line")//making a line for legend
.attr("x1", width - 28)
.attr("x2", width)
.attr("y1", 10)
.attr("y2", 10)
.style("stroke-dasharray","5,5")//dashed array for line
.style("stroke", color);
legend.append("text")
.attr("x", width - 44)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
工作示例此处
希望这项工作
这篇关于如何使用d3.js制作虚线图例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文