拆分D3图Y轴垂直彩色线

Question

我想分割一些D3图Y轴垂直彩色线。您可以在下面的是当前外观的图片中看到，如何它应该看起来像：

什么我试过到目前为止被设置背景颜色为克元太行止跌不会显示在该特定区域，但它不起作用;我无法设置与background-color: gray;背景颜色。

要让HTML标记的一个更好的主意，你可以在下面的彩色线条体表示为D3 foreignObjects和他们下位于的文本值的图片中看到。

有没有人对如何让这些彩色线条分裂的想法？

更新

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

//Add colored lines 
this.graph.append("foreignObject") 
    .attr("id", "legendBackground" + segmentId) 
    .attr("class", "legendBackground") 
    .attr("height", this.graphHeight) 
    .attr("width", "2") 
    .attr("y", 0) 
    .attr('x', xOffset + 11) 
    .style('background-color', (d) => this.colors(segmentId)); 

this.updateLegend(); 

//Add text values 
var yScale = this.getYScale(domain); 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .tickSize(value) 
    .tickFormat(d3.format(".1f")) 
    .tickPadding(this.isSmallScreen ? 6 : 12) 
    .orient("left"); 

/** If there is already an xAxis then update this one, do not redraw from scratch */ 
if (!this.graph.select(".y.axis" + (secondary ? "2" : "")).empty()) { 
    var t0 = this.graph.select(".y.axis" + (secondary ? "2" : "")) 
     .attr("transform", "translate(" + (secondary ? (this.primaryAxis.width + this.padding.left + this.secondaryAxis.width + this.axisSpacing) : (this.primaryAxis.width + this.padding.left)) + ",0)") 
     .transition() 
     .call(yAxis); 
} else { 
    var t0 = this.graph.insert("svg:g",":first-child") 
     .attr("class", secondary ? "y axis2" : "y axis") 
     .attr("transform", "translate(" + (secondary ? (this.primaryAxis.width + this.padding.left + this.secondaryAxis.width + this.axisSpacing) : (this.primaryAxis.width + this.padding.left)) + ",0)") 
     .transition() 
     .call(yAxis); 
} 

Answer 1

你有两个问题：

1. 你不能风格<g>元素。组只是容器元素。

2. 您的foreignObject s不在文本下方，它们实际上位于over的文字内。在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") 
 
\t .data([1,1]) 
 
\t .enter() 
 
\t .append("line") 
 
\t .attr("y1", 0) 
 
\t .attr("y2", 500) 
 
\t .attr("x1", (d,i)=>100 + i*8) 
 
\t .attr("x2", (d,i)=>100 + i*8) 
 
\t .attr("stroke-width", 2) 
 
\t .attr("stroke", (d,i)=>color(i)); 
 
\t 
 
var scale = d3.scalePoint() 
 
\t .domain(d3.range(62,78,2)) 
 
\t .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");  
 
}); 
 
\t

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

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

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

PS：我借来的代码用于从this answer插入在蜱的矩形。