d3js v5 调整分组条形图的大小答案

【问题标题】：d3js v5 Resize Grouped Bar Chartd3js v5 调整分组条形图的大小
【发布时间】：2018-09-10 18:00:57
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

将一个类 (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轴网格线，........

【讨论】：