javascript - d3js v5 调整分组条形图的大小
问题描述
我正在尝试使用 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(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- 属性引起的,但我该如何解决呢?
这是我的代码:https ://plnkr.co/edit/XEoM7lsBvZQmY87Wz1SP?p=preview
解决方案
将类 ( 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); });
在 resize 函数中更新翻译
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轴网格线,......
推荐阅读
- php - 有人可以给我一个想法,如何在 Symfony4 中触发 onDelete(remove) 事件
- angular - 如何提取具有不同对象类型的 Observable(Http Post-request)的某些属性
- android - 交易在 Firestore 中成功但在 onFailure 中着陆
- reactjs - React Router 更改 URL,但视图没有改变,但是如果我在 url 位于浏览器选项卡上时按 Enter 键,它会改变
- javascript - Ajax javascript 映射到 Spring 控制器
- python - 如何在python中打印json文件的特定部分?
- sql - SQL:使用相等键和最近键连接(类似于 Pandas 的合并)
- algorithm - 转换后的数组中的第 K 个元素
- hashicorp-vault - 如何将 HashiCorp Vault Agent 与多个应用程序一起使用
- firebase - 如何删除集合中的所有文档,但保留模式的文档除外