拆分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插入在蜱的矩形。