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

Question

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

我想添加 2 个水平矩形，在 X 轴的整个图形中，圆圈的后面，以及 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")

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

D3JS - Horizontal highlight on scatter plot

highlight

d3.js