Javascript d3js v5调整分组条形图的大小
我正在尝试使用resize()函数调整分组条形图的大小Javascript d3js v5调整分组条形图的大小,javascript,d3.js,Javascript,D3.js,我正在尝试使用resize()函数调整分组条形图的大小 function resize(){ width = parseInt(d3.select(".c_chart").style("width"), 10); x0.rangeRound([margin.left, width-margin.right]); x1.rangeRound([margin.left,x0.bandwidth()-margin.right]) yAxis.tickSize(wi
function resize(){
width = parseInt(d3.select(".c_chart").style("width"), 10);
x0.rangeRound([margin.left, width-margin.right]);
x1.rangeRound([margin.left,x0.bandwidth()-margin.right])
yAxis.tickSize(width);
svg.selectAll("rect")
.attr("x", function(d) { return x1(d.key); })
.attr("width", x1.bandwidth());
svg.selectAll(".x_axis")
.call(xAxis)
.selectAll("text")
.call(wrap, x0.bandwidth());
}
当我开始调整窗口的大小时,x轴是可以的,但是我最近的x轴的x位置不“跟随”x轴的刻度。
然后,我怀疑这个问题是由于x属性造成的,但是我如何修复它呢
这是我的代码:将类(gbar
)添加到包含组的g
svg
.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x0(d.categorie) + ",0)"; })
.attr("class", "gbar")
.selectAll("rect")
.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect")
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height-margin.bottom - y(d.value); })
.attr("fill", function(d) { return z(d.key); });
在“调整大小”功能中,更新平移
svg.selectAll(".gbar")
.attr("transform", function(d) { return "translate(" + x0(d.categorie) + ",0)"; });
并更新SVG的大小
svg
.attr("width",width)
.attr("height",height);
不要使用x1
刻度中的边距
const x1 = d3.scaleBand()
.padding(0.05)
.domain(keys)
//.rangeRound([margin.left,x0.bandwidth()-margin.right])
.rangeRound([0,x0.bandwidth()]);
// resize()
//x1.rangeRound([margin.left,x0.bandwidth()-margin.right])
x1.rangeRound([0,x0.bandwidth()])
唯一需要修复的是y轴网格线