如何使用d3.js制作虚线图例

我通常通过附加一个

rect

来制作线条图例，给它一个非常小的高度，使它看起来像一条线条

但现在我需要一个虚线图例。我不能用我以前的方法做这件事。有谁能给我举一个简单的例子，说明如何使用d3.js使用

append（'path'）

创建线条图例

---

您可以使用

行

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

工作示例

---

希望这项工作

看看可以轻松用于绘制虚线的笔划的

笔划dasharray

属性。根据上面的注释，使用svg

行

元素而不是细矩形，因为沿上边缘和下边缘的虚线彼此不匹配。设置笔划宽度，使线条尽可能粗