折线图轴的D3图例

Question

我在d3.js的帮助下制作折线图，其轴显示的数字为0m，1m 2m，3m ......等单位的varios单位。我想在折线图附近显示这些单位的图例，例如m = mili，n = nano，B = billion等。

Answer 1

以下是带有图例的example折线图。我不确定您是否按照相同的流程绘制折线图，​​因为d3中的大多数示例都使用相同的方法。但是因为你的问题没有任何代码，所以这里只有example .Below是如何做到的片段：

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;
    });