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

我最近开始学习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);

我试过使用这个片段，但是它会使所有的图例元素都变成虚线

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

---

任何帮助或建议都将不胜感激

您可以根据数据将

图例

分为两组-一组用于条形图，另一组用于虚线：

对于条形图图例：

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

---

我明白了。使用了@valangars answer的一部分，但在两个部分上都添加了过滤器，以仅分配具有所需样式的图例元素

.filter(function(d){
  return(d === 'dashed line data name');
  })
  .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);

---

谢谢

现在，在我的图例中，每个填充的矩形旁边都有一条虚线