其他响应分组的 d3 条形图中的无响应条答案

【问题标题】：unresponsive bars in otherwise responsive grouped d3 bar chart其他响应分组的 d3 条形图中的无响应条
【发布时间】：2016-08-27 13:43:45
【问题描述】：

我正在尝试构建一个 responsive 分组 d3 条形图，以此为指导：

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

我也用它来指导创建分组图表：

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

我现在有一个图表，可以在调整窗口大小时调整轴和网格线的大小，但条形图（矩形）保持固定。根据 mbostock 示例中的代码，我不清楚在 x 轴调整大小时需要进行哪些更改才能使条形图移动到新位置。

下面的代码示例来自 3 个关键方法。 init 在第一次加载时运行并调用 render。然后窗口调整大小的事件监听器运行render。

来自 init 方法的代码：

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);

render 方法的代码：

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 的大小。我更喜欢使用窗口调整大小事件处理程序的方法，这样我就可以针对较小的设备修改图表。

非常感谢任何帮助。

【问题讨论】：

我们需要更多代码来帮助您。
ok 添加了驱动图表创建和随后在窗口调整大小时重新渲染的三个关键方法中的每一个的代码。希望它比以前的更好......

标签： javascript d3.js charts data-visualization responsive

【解决方案1】：

好吧，我找到了解决方案。不知道它是否是一个好的，但它可以完成工作！

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

【讨论】：