响应性分组 d3 条形图中的无响应条形图

Question

我正在尝试构建一个响应式 分组 d3 条形图，以此作为指南：

http://blog.webkid.io/responsive-chart-usability-d3/

我也用它作为创建分组图表的指导：

https://bl.ocks.org/mbostock/3887051

我现在有一个图表，可以在 window 调整大小时调整轴和网格线的大小，但条形图（矩形）保持不变。根据 mbostock 示例中的代码，我不清楚需要更改什么才能让条形图随着 x 轴调整大小时移动到新位置。

以下 3 个关键方法的代码示例。 init 获取运行并在首次加载时调用 render。然后事件侦听器 for window resize 运行s render.

初始化方法的代码：

x = d3.scale.ordinal().domain(data.map(d => d.label));
x1 = d3.scale.ordinal().domain(scales);
y = d3.scale.linear().domain([0, 5]);

xAxis = d3.svg.axis().orient('bottom');
yAxis = d3.svg.axis()
  .orient('left')

svg = d3.select(element).append('svg');
chartWrapper = svg.append('g');
chartWrapper.append('g').classed('x axis', true);
chartWrapper.append('g').classed('y axis', true);

来自渲染方法的代码：

x.rangeBands([0, width]);
x1.rangeRoundBands([0, x.rangeBand()]);
y.range([height, 0]);

svg
  .attr('width', width + margin.right + margin.left)
  .attr('height', height + margin.top + margin.bottom);
chartWrapper.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

xAxis.scale(x);
yAxis.scale(y);

svg.select('.x.axis')
  .attr('transform', 'translate(0, ' + height + ')')
  .call(xAxis)

svg.select('.y.axis')
  .call(yAxis)

bars = svg.selectAll('.bar')
  .data(data)
.enter().append("g")
  .attr("class", "bar")
  .attr("transform", d => "translate(" + x(d.label) + ", 0)");

bars.selectAll("rect")
  .data(d => d.scores)
  .enter()
    .append("rect")
    .attr("transform", "translate(125, 21)")
    .attr("width", x1.rangeBand())
    .attr("x", d => x1(d.name))
    .attr("y", d => y(d.value))
    .attr("height", d => height - y(d.value))

来自 updateDimensions 的代码：

margin.top = 20;
margin.right = 10;
margin.left = 125;
margin.bottom = 110;

width = elementWidth - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;

我还要补充一点，我研究了其他一些响应式图表的解决方案，例如使用 viewBox 调整整个 svg 的大小。我更喜欢使用 window 调整大小事件处理程序的方法，这样我就可以为较小的设备修改图表。

非常感谢任何帮助。

Answer 1

嗯，我找到了解决办法。不知道它是否好，但它完成了工作！

在添加条形元素之前添加 svg.selectAll('.bar').remove(); 是诀窍。

响应性分组 d3 条形图中的无响应条形图

unresponsive bars in otherwise responsive grouped d3 bar chart

javascript

charts

data-visualization

d3.js

responsive