Question

我写过这张图表很好，很简单，但没有响应，它必须是。我尝试了一些没有运气的事情。我不是d3js的专家。

我尝试过以下但是没有用。

/*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

如何使d3js直方图响应

1 个答案: