응답 성이없는 그룹화 된 d3 막대 차트의 응답하지 않는 막대

이것을 가이드로 사용하여 반응 형 그룹화 된 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의 크기를 조정하는 것과 같은 반응 형 차트에 대한 다른 솔루션을 살펴 보았습니다. 더 작은 장치의 차트를 수정할 수 있도록 창 크기 조정 이벤트 처리기를 사용하는 방법을 선호합니다.

어떤 도움이라도 대단히 감사합니다.