【发布时间】：2019-08-31 03:11:48
【问题描述】：
我有一个网页，显示通过 D3 生成的三层嵌套 svg。我正在尝试将中间的一组嵌套 svg 更改为一个 flexbox，以便最里面的一组 svg 将与代表最外面的 flexbox 的垂直线隔开，然后如果它们需要更多空间则向下移动。我的问题是我无法更改 css 页面上的中间容器。我相信我有right syntax，但我什至不能做一个简单的事情，比如改变归类为“第二”的svgs的背景颜色。这没有给我带来任何变化，例如：
.second {
background-color: black;
}
css 适用于“容器”类。我认为差异可能是因为它是 div，而不是 svg，因此我将所有 svg 都更改为 div - 但这没有影响。
如果我执行以下操作，我可以更改背景颜色：
svg {
background-color: black;
}
这不是我想要的，确切地说（我不想选择页面上的其他 svg），但我想测试一下 flexbox 是否可以工作：
svg {
display: flex;
padding: 60px;
flex: 1 1 1;
flex-wrap: nowrap;
}
奇怪的是，它并没有像我预期的那样工作。也就是说，最里面的 svgs 仍然堆积在另一个之上。
这是我的代码 - 提前致谢，
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>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>【问题讨论】：
-
您的 sn-p 不起作用。您也可以使用
svg.second选择带有second类的svg。需要注意的是，SVG 与常规元素有一些不同的 CSS。 -
SVG 有不同的功能，例如
fill:是background-colour— 我也不认为可以将 flexbox 用作 svg 的一部分，<svg>中的任何内容都由不同的一套规则。 SVG Documentation -
感谢 pmkro 和 Andrew Robinson。 Pmkro - 无法弄清楚为什么我的 sn-p 在 Atom 中工作正常时无法正常工作。将尽快修复并重新发布。安德鲁·罗宾逊 - 感谢您提供的信息。
-
修复了代码 - 忘记在 html 中添加 div
-
嗨 Andrew Robinson 和 pmkro：我只是想说谢谢你告诉我 svg 不适合成为 flexbox。结果我把变量svgs2改成了div2。一旦 div2 是一个 div，我就可以在 css 中使它成为 flexbox。这样做从技术上解决了我的问题 - 即，所有“.second” svgs 都分布在列中，但有一个缺点：文本 svg 也被捕获在 flexbox 中，并且不再位于第二个 svgs 之上。跨度>
标签： javascript html css d3.js svg