如何在css中引用svg类？

Question

I have a webpage that shows three levels of nested svgs generated via D3. I'm trying to change the middle set of nested svgs into a flexbox so that innermost set of svgs will be spaced to the vertical line representing the outermost flexbox, then move down if they need more space. My problem is that I am unable to make changes to the middle containers on the css page. I believe I have the right syntax but cannot even do a simple thing like change the background-color of the svgs classed as "second." This brings me no changes, for example:

.second {
  background-color: black;
}

The css works on the "container" class. I thought the difference might be because it is a div, rather than a svg, and as a result I changed all my svgs to divs - but that had no impact.

I am able to change the background-color if I do the following:

svg {
  background-color: black;
}

This isn't what I want, exactly (I don't want to select the other svgs on the page), but I wanted to test to see if flexbox could work:

svg {
  display: flex;
  padding: 60px;
  flex: 1 1 1;
  flex-wrap: nowrap;
}

Oddly enough, it didn't work as I expected. That is, the innermost svgs were still piled up on top of one another.

Here's my code - thanks in advance,

 var doc = `Manual Category Function1 Function2 MaxRetentionRounded DOG "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5 TR Senate Committee on animal Standards Bowl and Plate Design Jack 5 TR Published Canine Bowl and Plate Design Jack 1 TR Canine case files Bowl and Plate Design Jack 1 DOG Canine Files Avoiding Neck Strain Jack 6 DOG Canine Files Drooling Jack 6 DOG Canine Files Drooling Jack 7 DG ADVERTISING At home Jack 7 DG PROMOTIONS At home Jack 100 DG3 Publications At homeio Jack 5 TR Public and Information Services At homeio Jack 5 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 5 TR Petting Services Getting special pats Snack 5 TR Petting Services Getting special pats Snack 1 TR Petting Services Getting special pats Snack 1 DG DEVELOPMENT Optimal time of day - walking Snack 6 DG INCOME AND REVENUE Optimal time of day - walking Snack 6 TR Fundraising Optimal time of day - walking Snack 7 TR Fundraising Optimal time of day Snack 7 DG DEVELOPMENT Optimal time of day Snack 1 DG INCOME AND REVENUE Optimal time of day Snack 5 TR Wishbone Protective Measures Snack 5 TR Wishbone Protective Measures Pack 1 DG Wishbone Observant of Limps Etc Pack 1 DOG Wishbone Observant of Limps Etc Pack 8 TR Wishbone Observant of Limps Etc Pack 8 `; const data = d3.tsvParse(doc, function(d) { return { Manual: d.Manual, Category: d.Category, Function1: d.Function1, Function2: d.Function2, MaxRetentionRounded: d.MaxRetentionRounded }; }); var legendText = (["TR", "DG", "DOG", "DG3"]) var color = d3.scaleOrdinal() .domain(legendText) .range(["#f7f7f7", "#cccccc", "#404040", "#c627c7"]); var nest = d3.nest() .key(function(d) { return d.Function2; }) .key(function(d) { return d.Function1; }) .key(function(d) { return d.Category; }) .entries(data); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) var height = 80, width = 150; data.sort(function(a, b) { return b.MaxRetentionRounded - a.MaxRetentionRounded; }); var divs = d3.select(".container") .selectAll(null) .data(nest) .enter() .append("div") .attr("class", "innerdiv"); divs.append("p") .html(function(d) { return d.key; }); var svgs = divs.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('svg') // .attr("width", "auto") .attr("height", height + 20) svgs.append("text") .attr('class', 'label') .attr('x', 0) .attr('y', 15) .style("font-size", "16px") .style("font-weight", "bold") .text(function(d) { return d.key; }) .attr('text-anchor', 'start') var svgs2 = svgs.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('svg') .style("width", 200) .attr("class", "second") .attr("transform", function(d, i) { return "translate(" + i * 00 + ",0)"; }); // .attr("height", height + 20); svgs2.append("text") .attr('class', 'label') .attr('x', 0) .attr('y', 80) .style("font-size", "12px") .text(function(d) { return d.key; }) .attr('text-anchor', 'start') svgs2.selectAll("rect") .data(data) .enter().append("rect") .attr("class", "bar") .filter(function(d, i) { const x = d3.select(this.parentNode).datum(); return x.key == d.Category ? 1 : 0; }) .attr("height", function(d) { return d.MaxRetentionRounded * 5; }) .attr("transform", "translate(2,20)") .attr("width", "25") .attr("x", function(d, i) { return i * 30; }) .attr("y", function(d, i) { return (height - 40) - (d.MaxRetentionRounded * 5); }) .attr("stroke", function(d, i) { return d.ModifiedRetention === "TBD" ? "blue" : "black" }) .attr("fill", function(d) { return color(d.Manual) }); 

 div.tooltip { position: absolute; text-align: center; width: auto; height: auto; padding: 3px; font: 12px sans-serif; border: 0px; border-radius: 3px; pointer-events: none; background: lightgrey; } .container { display: flex; padding: 60px; flex: 1 1 1; flex-wrap: wrap; } .innerdiv { text-align: left; font-size: 21px; font-family: "Century Gothic"; flex: 1 1 0; } .innerdiv+.innerdiv { padding-left: 16px; border-left: 2px solid lightgray; } .legend { position: fixed; font-family: "Century Gothic"; } /* div {width: auto; height: auto; } */ div.second { display: flex; padding: 60px; flex: 1 1 1; flex-wrap: wrap; } /* svgs2 {width: auto; height: auto; background-color:#353839;} 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mapping Dog Care Manuals</title> <script src="https://d3js.org/d3.v4.min.js"></script> <div class="container"></div> </head> </html> 

UPDATE: Managed to add a new flexbox nested inside the old flexbox, by changing the svg2 to a div. The only problem now is that the text appended to div2 is now being treated as a child of the flexbox, which is pushing the svg to the right. (The problem only becomes apparent when the webpage is fullsize)

 var doc = `Manual Category Function1 Function2 MaxRetentionRounded DOG "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5 TR Senate Committee on animal Standards Bowl and Plate and Plate Design Jack 5 TR Published Canine Bowl and Plate Design Jack 1 TR Canine case files Bowl and Plate Design Jack 1 DOG Canine Files Avoiding Neck Strain Jack 6 DOG Canine Files Drooling Jack 6 DOG Canine Files Drooling Jack 7 DG ADVERTISING At home Jack 7 DG PROMOTIONS At home Jack 100 DG3 Publications At homeio Jack 5 TR Public and Information Services At homeio Jack 5 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 5 TR Petting Services Getting special pats Snack 5 TR Petting Services Getting special pats Snack 1 TR Petting Services Getting special pats Snack 1 DG DEVELOPMENT Optimal time of day - walking Snack 6 DG INCOME AND REVENUE Optimal time of day - walking Snack 6 TR Fundraising Optimal time of day - walking Snack 7 TR Fundraising Optimal time of day Snack 7 DG DEVELOPMENT Optimal time of day Snack 1 DG INCOME AND REVENUE Optimal time of day Snack 5 TR Wishbone Protective Measures Snack 5 TR Wishbone Protective Measures Pack 1 DG Wishbone Observant of Limps Etc Pack 1 DOG Wishbone Observant of Limps Etc Pack 8 TR Wishbone Observant of Limps Etc Pack 8 `; const data = d3.tsvParse(doc, function(d) { return { Manual: d.Manual, Category: d.Category, Function1: d.Function1, Function2: d.Function2, MaxRetentionRounded: d.MaxRetentionRounded }; }); var legendText = (["TR","DG","DOG","DG3"]) var color = d3.scaleOrdinal() .domain(legendText) .range(["#f7f7f7","#cccccc","#404040","#c627c7"]); var nest = d3.nest() .key(function(d) { return d.Function2; }) .key(function(d) { return d.Function1; }) .key(function(d) { return d.Category; }) .entries(data); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) var height = 80, width = 150; data.sort(function(a, b) { return b.MaxRetentionRounded - a.MaxRetentionRounded; }); var divs = d3.select(".container") .selectAll(null) .data(nest) .enter() .append("div") .attr("class", "innerdiv"); divs.append("p") .html(function(d){ return d.key; }); var divs2 = divs.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('div') .attr("class","first") divs2.append("text") .attr('class', 'label1') .attr('x', 0) .attr('y', 0) .style("font-size", "16px") .style("font-weight","bold") .attr("width","100%") .text(function(d) { return d.key; }) .attr('text-anchor', 'start') var svgs2 = divs2.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('svg') .attr("class","second") .attr("width", function (d) {return String(d.Category).length > d.values.length ? (String(d.Category).length*30)+50 : (d.values.length*30)+20}) .attr("height", height + 20); svgs2.append("text") .attr('class', 'label2') .attr('x', 0) .attr('y', 80) .style("font-size", "12px") .text(function(d) { return d.key; }) .attr('text-anchor', 'start') svgs2.selectAll("rect") .data(data) .enter().append("rect") .attr("class", "bar") .filter(function(d, i) { const x = d3.select(this.parentNode).datum(); return x.key == d.Category ? 1 : 0; }) .attr("height", function(d) { return d.MaxRetentionRounded * 5; }) .attr("transform","translate(2,20)") .attr("width", "25") .attr("x", function(d, i) { return i * 30; }) .attr("y", function(d,i) {return (height-40)-(d.MaxRetentionRounded*5);}) .attr("stroke",function (d,i) {return d.ModifiedRetention === "TBD"? "blue" : "black"}) .attr("fill", function(d) { return color(d.Manual)}); 

 .container { display: flex; padding: 0px; flex: 1 1 1; flex-wrap: nowrap; } .innerdiv { text-align: left; font-size: 21px; font-family: "Century Gothic"; flex: 1 1 1; } .innerdiv + .innerdiv { padding-left: 0px; border-left: 2px solid lightgray; } div.first { display: flex; padding: 0px; flex: 0 0 100%; flex-wrap: wrap; flex-direction: row; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <div class="container"></div> 

Answer 1

There are two tricks to solving this problem. The first trick is to remember, as @Andrew Robinson points out, that the flexbox property only applies to divs, not svgs. Therefore, the following segment of the code must be rewritten so that the element appended is a div, not an svg:

var svgs = divs.selectAll(null)
  .data(function(d) {
    return d.values;
  })
  .enter()
  .append('svg') **// change this to: .append('div')**
  .attr("height", height + 20)

Trick two: once the above changes are made, an aesthetic issue will become apparent: the div containing the text will appear on the same line as the divs containing the rectangles. To fix this requires adding a piece of code in the css page that indicates the first child-item will be set at a width of 100%.

.first>*:first-child {
    width: 100%;
}

More information on the first-child property can be found here: First-child full-width in Flexbox

Complete code here:

 var doc = `Manual Category Function1 Function2 MaxRetentionRounded DOG "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5 TR Senate Committee on animal Standards Bowl and Plate and Plate Design Jack 5 TR Published Canine Bowl and Plate Design Jack 1 TR Canine case files Bowl and Plate Design Jack 1 DOG Canine Files Avoiding Neck Strain Jack 6 DOG Canine Files Drooling Jack 6 DOG Canine Files Drooling Jack 7 DG ADVERTISING At home Jack 7 DG PROMOTIONS At home Jack 100 DG3 Publications At homeio Jack 5 TR Public and Information Services At homeio Jack 5 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 1 TR Petting Services Getting special treats Jack 5 TR Petting Services Getting special pats Snack 5 TR Petting Services Getting special pats Snack 1 TR Petting Services Getting special pats Snack 1 DG DEVELOPMENT Optimal time of day - walking Snack 6 DG INCOME AND REVENUE Optimal time of day - walking Snack 6 TR Fundraising Optimal time of day - walking Snack 7 TR Fundraising Optimal time of day Snack 7 DG DEVELOPMENT Optimal time of day Snack 1 DG INCOME AND REVENUE Optimal time of day Snack 5 TR Wishbone Protective Measures Snack 5 TR Wishbone Protective Measures Pack 1 DG Wishbone Observant of Limps Etc Pack 1 DOG Wishbone Observant of Limps Etc Pack 8 TR Wishbone Observant of Limps Etc Pack 8 `; const data = d3.tsvParse(doc, function(d) { return { Manual: d.Manual, Category: d.Category, Function1: d.Function1, Function2: d.Function2, MaxRetentionRounded: d.MaxRetentionRounded }; }); var legendText = (["TR","DG","DOG","DG3"]) var color = d3.scaleOrdinal() .domain(legendText) .range(["#f7f7f7","#cccccc","#404040","#c627c7"]); var nest = d3.nest() .key(function(d) { return d.Function2; }) .key(function(d) { return d.Function1; }) .key(function(d) { return d.Category; }) .entries(data); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) var height = 80, width = 150; data.sort(function(a, b) { return b.MaxRetentionRounded - a.MaxRetentionRounded; }); var divs = d3.select(".container") .selectAll(null) .data(nest) .enter() .append("div") .attr("class", "innerdiv"); divs.append("p") .html(function(d){ return d.key; }); var divs2 = divs.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('div') .attr("class","first") divs2.append("text") .attr('class', 'label1') .attr('x', 0) .attr('y', 0) .style("font-size", "16px") .style("font-weight","bold") .attr("width",600) .text(function(d) { return d.key; }) .attr('text-anchor', 'start') var svgs2 = divs2.selectAll(null) .data(function(d) { return d.values; }) .enter() .append('svg') .attr("class","second") .attr("width", function (d) {return String(d.Category).length > d.values.length ? (String(d.Category).length*27) : (d.values.length*30)}) // .attr("width",200) .attr("height", height + 20); svgs2.append("text") .attr('class', 'label2') .attr('x', 0) .attr('y', 80) .style("font-size", "12px") .text(function(d) { return d.key; }) .attr('text-anchor', 'start') svgs2.selectAll("rect") .data(data) .enter().append("rect") .attr("class", "bar") .filter(function(d, i) { const x = d3.select(this.parentNode).datum(); return x.key == d.Category ? 1 : 0; }) .attr("height", function(d) { return d.MaxRetentionRounded * 5; }) .attr("transform","translate(2,20)") .attr("width", "25") .attr("x", function(d, i) { return i * 30; }) .attr("y", function(d,i) {return (height-40)-(d.MaxRetentionRounded*5);}) .attr("stroke",function (d,i) {return d.ModifiedRetention === "TBD"? "blue" : "black"}) .attr("fill", function(d) { return color(d.Manual)}); 

 div.tooltip { position: absolute; text-align: center; width: auto; height: auto; padding: 3px; font: 12px sans-serif; border: 0px; border-radius: 3px; pointer-events: none; background: lightgrey; } .container { display: flex; padding: 0px; flex: 1 1 1; flex-wrap: nowrap; } .innerdiv { text-align: left; font-size: 21px; font-family: "Century Gothic"; flex: 1 1 1; } .innerdiv + .innerdiv { padding-left: 0px; border-left: 2px solid lightgray; } .first>*:first-child { width: 100%; } div.first { display: flex; padding: 0px; flex: 0 0 100%; flex-wrap: wrap; flex-direction: row; align-items: center; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <div class="container"></div>