如何将D3条形图的斜线背景改为白色实心圆点背景？

嘿，我来帮你搞定这个需求！你不用纠结修改path的d属性来模拟圆点，直接在D3的pattern里使用circle元素是更直观也更易维护的实现方式。下面是调整后的完整代码，以及关键部分的说明：

修改后的完整代码 #

var svg = d3.select("body").append("svg");

// 定义圆点图案
svg.append('defs')
  .append('pattern')
    .attr('id', 'dotPattern')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 8)  // 图案单元的宽度，控制圆点间距
    .attr('height', 8) // 图案单元的高度，控制圆点间距
  .append('circle')
    .attr('cx', 4)     // 圆点在单元中的x中心位置
    .attr('cy', 4)     // 圆点在单元中的y中心位置
    .attr('r', 1.5)    // 圆点半径
    .attr('fill', '#fff'); // 圆点颜色

// 绘制蓝色背景矩形
svg.append("rect")
  .attr("x", 0)
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", 'blue');

// 绘制覆盖圆点图案的矩形
svg.append("rect")
  .attr("x", 0)
  .attr("width", 100)
  .attr("height", 100)
  .attr('fill', 'url(#dotPattern)');

关键调整说明 #

• 替换图案元素：把原来生成斜线的path换成了circle元素，直接用原生图形来实现圆点效果，比用路径模拟更简洁。
• 控制圆点间距：通过pattern的width和height属性调整圆点之间的距离，数值越大，圆点分布越稀疏；数值越小则越密集。
• 调整圆点样式：通过r属性控制圆点大小，fill设置为白色，完全匹配你想要的效果。

这样修改后，就能得到你目标图里蓝底白色实心圆点的效果，而且代码逻辑清晰，后续调整圆点大小、间距或者颜色都非常方便。

内容的提问来源于stack exchange，提问作者lance-p