使D3堆积条形图填充父SVG容器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使D3堆积条形图填充父SVG容器相关的知识,希望对你有一定的参考价值。
我有一个D3堆叠条形图组件,我试图让它填充父SVG中的可用空间。这将允许我使用html调整图表大小,而不必手动输入大小。
目前我的尺寸是硬编码的,我不知道如何将其更改为更具响应性的格式。
以下是相关的组件代码片段:
let data = this.get('data')
let div = select('body')
.append("div")
.attr("class", "stack-tooltip")
let series = stack()
.keys(["count1", "count2", "count3"])
.offset(stackOffsetDiverging)
(data);
let svg = select(this.$('svg')[0]),
margin = {
top: 20,
right: 30,
bottom: 30,
left: 60
},
width = +svg.attr("width"),
height = +svg.attr("height");
let x = scaleBand()
.domain(data.map(function(d) {
return d.label;
}))
.rangeRound([margin.left, width - margin.right])
.padding(0.1);
let y = scaleLinear()
.domain([min(series, stackMin), max(series, stackMax)])
.rangeRound([height - margin.bottom, margin.top]);
let z = scaleOrdinal().range(['#DAEAF1', '#99CFE0', '#72BCD4']);
svg.append("g")
.selectAll("g")
.data(series)
.enter().append("g")
.attr("fill", function(d) {
return z(d.key);
})
.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("width", x.bandwidth)
.attr("x", function(d) {
return x(d.data.label);
})
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return y(d[0]) - y(d[1]);
})
.attr('opacity', d => {
let selected = this.get('selectedLabel');
return (selected && d.data.label !== selected) ? '0.5' : '1.0';
})
function stackMin(h) {
return min(h, function(d) {
return d[0];
});
}
function stackMax(h) {
return max(h, function(d) {
return d[1];
});
}
我确实尝试将rangeRound值更改为'X'和'Y'函数的百分比,但在尝试将X和Y属性中的值更改为模板文字时,我无法渲染图表的条形。
组件模板中的SVG使用简单的<svg width='800' height="300"></svg>
创建
任何帮助是极大的赞赏
答案
如果你想让它扩展到它的父容器,你需要给SVG一个viewBox
,而不是width
和height
。
viewBox
告诉浏览器SVG坐标空间的哪个区域,内容占用。这样它就知道如何缩放内容。
以上是关于使D3堆积条形图填充父SVG容器的主要内容,如果未能解决你的问题,请参考以下文章