我有一个网页,显示了通过D3生成的三级嵌套svg。我试图将嵌套的svg的中间组更改为flexbox,以便将最里面的svg组与代表最外面的flexbox的垂直线隔开,然后在需要更多空间的情况下向下移动。我的问题是我无法在CSS页面上更改中间容器。我相信我拥有right syntax,但甚至无法做一些简单的事情,例如更改分类为“第二”的svg的背景颜色。这不会给我带来任何变化,例如:
.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;
}
奇怪的是,它没有按我预期的那样工作。也就是说,最里面的svg仍然彼此堆叠。
这是我的代码-谢谢,
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>
答案 0 :(得分:0)
有两个技巧可以解决此问题。正如@Andrew Robinson指出的那样,第一个技巧是记住flexbox属性仅适用于div,而不适用于svgs。因此,必须重写以下代码段,以便附加的元素是div而不是svg:
var svgs = divs.selectAll(null)
.data(function(d) {
return d.values;
})
.enter()
.append('svg') **// change this to: .append('div')**
.attr("height", height + 20)
技巧二:一旦进行了上述更改,就会出现一个美学问题:包含文本的div将与包含矩形的div出现在同一行上。要解决此问题,需要在css页面中添加一段代码,指示第一个子项目的宽度将设置为100%。
.first>*:first-child {
width: 100%;
}
有关第一个孩子的财产的更多信息,请参见:First-child full-width in Flexbox
在此处填写代码:
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>