Question

我使用以下代码使条形图响应：

d3.select( window ).on( 'resize', function( ) {
  var targetWidth = parseInt( d3.select( '#chart' ).style( 'width' ), 10);
  chart.attr( 'width', targetWidth );
  chart.attr( 'height', targetWidth / aspect );
});

这仅适用于图表的一部分。我如何使整个图表响应？任何帮助将不胜感激。

您可以在此处查看所有代码：http://codepen.io/jesouhaite08/pen/fhvzA

Answer 1

d3中有两个选项可以使图表响应。

使用视图框和宽高比
使用调整大小功能

使用调整大小功能：Responsive Bar chart

Answer 2

在D3中，有一种更简单的方法可以使用SVG元素上的viewBox和preserveAspectRatio属性的组合来调整图表的大小。

const svg = d3
  .select('div#chart-container')
  .append('svg')
  .style(
    'padding',
    marginRatio.top +
      ' ' +
      marginRatio.right +
      ' ' +
      marginRatio.bottom +
      ' ' +
      marginRatio.left +
      ' '
  )
  .attr('preserveAspectRatio', 'xMinYMin meet')
  .attr(
    'viewBox',
    '0 0 ' +
      (width + margin.left + margin.right) +
      ' ' +
      (height + margin.top + margin.bottom)
  )

请参阅此处以供参考：https://eddyerburgh.me/create-responsive-bar-chart-d3-js

使d3条形图响应

2 个答案: