Split D3 Graph Y Axis vertical color lines

Question

I'm trying to split some D3 Graph Y Axis vertical colored lines. You can see in the image below what is the current look and how it should look like:

What I've tried so far is setting a background color for that g element so the line wouldn't be shown in that specific area but it doesn't work; I couldn't manage to set the background color with background-color: gray; .

To have a better idea of the HTML markup, you can see in the image below that the colored lines are represented with D3 foreignObjects and they are located under the text values .

Does anyone have an idea on how to get those colored lines splitted?

Still doesn't work in my case. I tried to render the colored lines at first and then the text values. Here is my code:

 //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

You have two problems:

1. You cannot style a <g> element. Groups are simply container elements.

2. Your foreignObject s are not located under the texts, they're actually located over the texts. In an SVG, who gets painted later stays on top. So, if you inspect the DOM, the elements in the bottom are painted later and are on the top "layer", while the elements in the top are painted first and are in the bottom "layer".

That all being said, an easier approach is selecting all .tick groups and inserting a rectangle before (that means, under) the texts. Of course, for this to work, remember to paint the lines before (again, it means under) the axis, just like in the following demo.

Here is the demo:

 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: I borrowed the code for inserting the rectangles in the ticks from this answer .