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

用户2403

通常,我会通过添加一个rect很小的高度来制作线条图例,以使其看起来像线条。

但是现在我需要一个虚线图例。我无法以旧方式做到这一点。谁能给我演示一下如何append('path')使用d3.js制作图例的简单示例

虚线图例示例

西里尔·切里安(Cyril Cherian)

您可以使用lineDOM使其如下

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

这里的工作示例

希望这项工作

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章