D3JS - 散点图上的水平突出显示

Question

我有一个D3JS散点图，有圆圈和白色背景。

我想在X轴上添加2个水平矩形，在圆圈后面以及Y轴上的某些值之间添加。

我需要的2个灰色区域如下（用Photoshop制作）：

第一个矩形在X轴上介于10和20之间，第二个矩形介于30和35之间。

我找到了这个帖子：How to add a highlight mark/area to a chart? 但我不知道如何为我的水平示例进行调整，因为它不像旋转垂直解决方案那么简单。

Answer 1

您可以通过创建两个具有一些不透明度的SVG矩形来实现相同的效果。当然，您需要填写正确的数据或从您的秤中生成数据。

 var rectOne = svg.append("rect")
                  .attr("x", 10)
                  .attr("y", 10)
                  .attr("width", 50)
                  .attr("height", 100)
                  .style("fill-opacity", 0.5)
                  .style("fill", "grey")

 var rectTwo = svg.append("rect")
                  .attr("x", 10)
                  .attr("y", 10)
                  .attr("width", 50)
                  .attr("height", 100)
                  .style("fill-opacity", 0.5)
                  .style("fill", "grey")