javascript - 分割D3图Y轴垂直色线

我正在尝试拆分一些D3图Y轴垂直彩色线。您可以在下面的图像中看到当前外观以及外观：



到目前为止，我已经尝试为该g元素设置背景颜色，以使该行不会在该特定区域中显示，但行不通；我无法使用background-color: gray;设置背景颜色。

为了更好地了解HTML标记，您可以在下面的图像中看到彩色线用D3 foreignObjects表示，它们位于文本值下方。



有谁知道如何拆分这些彩色的线条？

更新资料

在我的情况下仍然无法正常工作。我尝试先渲染彩色线条，然后渲染文本值。这是我的代码：

ojit_pre

最佳答案

您有两个问题：


您不能设置<g>元素的样式。组只是容器元素。
您的foreignObject不在文本下方，它们实际上位于文本上方。在SVG中，稍后被涂漆的人保持在最前面。因此，如果您检查DOM，则底部的元素将稍后绘制并位于顶部的“层”中，而顶部的元素将首先绘制并位于底部的“层”中。


综上所述，一种更简单的方法是选择所有.tick组，并在文本之前（即在文本下方）插入一个矩形。当然，要使此方法起作用，请记住在轴之前（再次意味着在轴下方）绘制线条，就像在下面的演示中一样。

这是演示：

var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 300);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var lines = svg.selectAll("foo")
	.data([1,1])
	.enter()
	.append("line")
	.attr("y1", 0)
	.attr("y2", 500)
	.attr("x1", (d,i)=>100 + i*8)
	.attr("x2", (d,i)=>100 + i*8)
	.attr("stroke-width", 2)
	.attr("stroke", (d,i)=>color(i));

var scale = d3.scalePoint()
	.domain(d3.range(62,78,2))
	.range([10,290]);

var gY = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(126,0)").call(d3.axisLeft(scale).tickFormat(d=>d3.format(".1f")(d)));

d3.selectAll(".tick").each(function(d,i){
  var tick = d3.select(this),
      text = tick.select("text"),
      bBox = text.node().getBBox();

  tick.insert("rect", ":first-child")
    .attr("x", bBox.x - 3)
    .attr("y", bBox.y - 3)
    .attr("height", bBox.height + 6)
    .attr("width", bBox.width + 6)
    .style("fill", "white");
});
	

.tick text{
	font-size: 14px;
}

.axis path, .axis line{
	stroke: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

PS：我借用了在this answer的刻度中插入矩形的代码。