Question

我正在尝试使用此作为指南构建响应式分组d3条形图：

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

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

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

我现在有一个图表，可以在窗口调整大小时调整轴和网格线的大小，但条形图（rects）保持固定。根据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的大小。我更喜欢使用窗口调整大小事件处理程序的方法，因此我可以对较小的设备进行图表修改。

非常感谢任何帮助。

Answer 1

好吧，我找到了解决方案。 Dunno，如果它是一个好的，但它完成了工作！

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

在反应灵敏的分组d3条形图中没有响应的条形图

1 个答案: