折线图轴的D3图例

Question

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

Answer 1

这是带有图例的折线图示例 。 我不确定您是否遵循相同的过程绘制折线图，​​因为d3中的大多数示例都使用相同的方法。 但是由于您的问题没有任何代码，因此无论如何这里都是一个示例。以下是如何执行的代码段：

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