javascript - 如何使用实线和虚线元素创建 d3.js 图例

Question

我最近开始学习 d3.js，在创建图例时遇到了一些问题，该图例具有实心矩形和虚线来表示图表中的条形和线条。

这是我尝试绘制的数据示例:

这是我想创建的图例示例:

这是我尝试用于图例的代码:

legend.append('rect')
  .attr('id', 'legend')
  .attr('x', this.state.width * 0.96)
  .attr('width', this.state.width * 0.025)
  .attr('height', this.state.width * 0.025)
  .attr('fill', z);

我试过使用这个 stackoverflow post 中的这个片段然而，它会使所有图例元素变成虚线。

.style("stroke-dasharray","5,5")

如有任何帮助或建议，我们将不胜感激!

Answer 1

您可以根据数据将 legend 分为两组 - 一组用于条形图，另一组用于虚线:

对于条形图例:

barLegend.append('rect')
  .attr('x', this.state.width * 0.96)
  .attr('width', this.state.width * 0.025)
  .attr('height', this.state.width * 0.025)
  .attr('fill', z);

对于线条图例:

lineLegend.append('line')
      .attr('x1', this.state.width * 0.96 )
      .attr('x2', (this.state.width * 0.96) + 30)
      .attr('y1', 10)
      .attr('y2', 10)
      .style('stroke-dasharray','5,5')
      .style('stroke', z);