Как сделать гистограмму d3js отзывчивой

Question

Я написал эту диаграмму, которая прекрасна, очень проста, но не реагирует на нее, которая должна быть. Я пробовал несколько вещей, не повезло. Я не специалист по d3js.

https://jsfiddle.net/a2zr20ep/14/

Я попытался ниже, но это не сработало.

/*window resize operations*/ 
function resize() { 
    console.log('----resize function----'); 
    // update width 
    width = parseInt(d3.select('#chartID').style('width'), 10); 
    width = width - margin.left - margin.right; 

    height = parseInt(d3.select("#chartID").style("height")); 
    height = height - margin.top - margin.bottom; 
    console.log('----resiz width----'+width); 
    console.log('----resiz height----'+height); 
    // resize the chart 
    xScale.rangeRoundBands([0, width], .1); 
    yScale.range([height+100, 0]); 

    yAxis.ticks(Math.max(height/50, 2)); 
    xAxis.ticks(Math.max(width/50, 2)); 

    d3.select(svgContainer.node().parentNode) 
     .style('width', (width + margin.left + margin.right) + 'px'); 

    svgContainer.selectAll('.g') 
     .attr("transform", function(d) { return "translate(" + xScale(d.name) + ",0)"; }); 

    svgContainer.selectAll("rect") 
     .attr("x",function(d) { return d.name; }) 
     .attr("width", xScale.rangeBand()); 

    svgContainer.select('.x.axis').call(xAxis.orient('bottom')).selectAll("text").attr('dy','0.5em').attr('dx','-3em'); 
} 

Answer 1

Если вы хотите просто масштабировать диаграмму, SVG масштабируется (векторная графика). На элементе SVG можно установить атрибут viewBox и preserveAspectRatio.

Если вы установили оба эти параметра и примените их в относительных единицах, таких как%, SVG просто масштабируется с вашим сайтом без необходимости переписывать диаграмму через js.

Я фактически просто нажал d3 chart template на github, где я использую этот подход.

Я развернул вашу скрипку и добавил viewbox, preserveAspectRatio и ширину 100%. Когда вы изменяете размер панели, диаграмма изменяется. См. this fiddle