[英]D3 legend for line chart axes
I have line chart made with the help of d3.js which has axes showing numbers with units such as 0m, 1m 2m, 3m..etc for varios units. 我在d3.js的帮助下制作了折线图,其中的轴显示数字,单位为0m,1m,2m,3m..etc等。 I want to show legend for these units such m = mili, n=nano, B = billion etc near the line chart.
我想在折线图附近显示这些单位的图例,例如m = mili,n = nano,B = billion。
Here is the an example of line chart with legends. 这是带有图例的折线图示例 。 I am not sure if you are following the same process to draw your line charts as most examples in d3 use the same.
我不确定您是否遵循相同的过程绘制折线图,因为d3中的大多数示例都使用相同的方法。 But as your question do not have any code so here goes an example anyways.Below is the snippet of how to do so:
但是由于您的问题没有任何代码,因此无论如何这里都是一个示例。以下是如何执行的代码段:
var legend = svg.selectAll(".legend")
.data(cities)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 4)
.style("fill", function(d) {
return color(d);
});
legend.append("text")
.attr("x", width - 24)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {
return d;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.