我写了一个小要点来解决这个问题。

一般的解决模式是这样的:

Breakout the script into computation and drawing functions. Ensure the drawing function draws dynamically and is driven of visualisation width and height variables (The best way to do this is to use the d3.scale api) Bind/chain the drawing to a reference element in the markup. (I used jquery for this, so imported it). Remember to remove it if it's already drawn. Get the dimensions from the referenced element using jquery. Bind/chain the draw function to the window resize function. Introduce a debounce (timeout) to this chain to ensure we only redraw after a timeout.

为了提高速度，我还添加了简化的d3.js脚本。 要点在这里:https://gist.github.com/2414111

Jquery参考回码:

$(reference).empty()
var width = $(reference).width();

防反跳代码:

var debounce = function(fn, timeout) 
{
  var timeoutID = -1;
  return function() {
     if (timeoutID > -1) {
        window.clearTimeout(timeoutID);
     }
   timeoutID = window.setTimeout(fn, timeout);
  }
};

var debounced_draw = debounce(function() {
    draw_histogram(div_name, pos_data, neg_data);
  }, 125);

 $(window).resize(debounced_draw);

享受吧!

肖恩·阿伦的回答很棒。但你可能不想每次都这么做。如果你把它放在vida上。Io，您可以自动响应SVG可视化。

你可以用这个简单的嵌入代码获得响应式iframe:

<div id="vida-embed">
<iframe src="http://embed.vida.io/documents/9Pst6wmB83BgRZXgx" width="auto" height="525" seamless frameBorder="0" scrolling="no"></iframe>
</div>

#vida-embed iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

http://jsfiddle.net/dnprock/npxp3v9d/1/

披露:我在vida.io上构建了这个功能。

我写了一个小要点来解决这个问题。

一般的解决模式是这样的:

Breakout the script into computation and drawing functions. Ensure the drawing function draws dynamically and is driven of visualisation width and height variables (The best way to do this is to use the d3.scale api) Bind/chain the drawing to a reference element in the markup. (I used jquery for this, so imported it). Remember to remove it if it's already drawn. Get the dimensions from the referenced element using jquery. Bind/chain the draw function to the window resize function. Introduce a debounce (timeout) to this chain to ensure we only redraw after a timeout.

为了提高速度，我还添加了简化的d3.js脚本。 要点在这里:https://gist.github.com/2414111

Jquery参考回码:

$(reference).empty()
var width = $(reference).width();

防反跳代码:

var debounce = function(fn, timeout) 
{
  var timeoutID = -1;
  return function() {
     if (timeoutID > -1) {
        window.clearTimeout(timeoutID);
     }
   timeoutID = window.setTimeout(fn, timeout);
  }
};

var debounced_draw = debounce(function() {
    draw_histogram(div_name, pos_data, neg_data);
  }, 125);

 $(window).resize(debounced_draw);

享受吧!

您还可以使用bootstrap 3来调整可视化的大小。例如，我们可以将HTML代码设置为:

<div class="container>
<div class="row">

<div class='col-sm-6 col-md-4' id="month-view" style="height:345px;">
<div id ="responsivetext">Something to write</div>
</div>

</div>
</div>

因为我的需要，我已经设置了一个固定的高度，但是你也可以保持大小自动。“col-sm-6 col-md-4”使div能够响应不同的设备。你可以在http://getbootstrap.com/css/#grid-example-basic上了解更多

我们可以在id month-view的帮助下访问该图。

我不会详细介绍d3代码，我只会输入适应不同屏幕尺寸所需的部分。

var width = document.getElementById('month-view').offsetWidth;

var height = document.getElementById('month-view').offsetHeight - document.getElementById('responsivetext2').offsetHeight;

宽度是通过id month-view获取div的宽度来设置的。

在我的例子中，高度不应该包括整个区域。我也有一些文字上面的酒吧，所以我需要计算的面积以及。这就是为什么我用id responsivetext标识文本区域的原因。为了计算栏的允许高度，我用div的高度减去文本的高度。

这允许你有一个条，将采用所有不同的屏幕/div大小。这可能不是最好的方法，但它肯定能满足我的项目的需要。

以防人们还在问这个问题——以下是对我有用的方法:

Enclose the iframe in a div and use css to add a padding of, say, 40% to that div (the percentage depending on the aspect ratio you want). Then set both width and height of the iframe itself to 100%. In the html doc containing the chart to be loaded in the iframe, set width to the width of the div that the svg is appended to (or to the width of the body) and set height to width * aspect ratio. Write a function that reloads the iframe content upon window resize, so as to adapt the size of the chart when people rotate their phone.

在我的网站上有一个例子: http://dirkmjk.nl/en/2016/05/embedding-d3js-charts-responsive-website

2016年12月30日更新

我上面描述的方法有一些缺点，特别是它没有考虑任何不在d3创建的svg中的标题和说明文字的高度。后来我想到了一个我认为更好的方法:

将D3图表的宽度设置为它所附的div的宽度，并使用纵横比来相应地设置它的高度; 使用HTML5的postMessage将嵌入页面的高度和url发送到父页面; 在父页面上，使用url识别相应的iframe(如果页面上有多个iframe，则很有用)，并将其高度更新为嵌入页面的高度。

例子在我的网站上:http://dirkmjk.nl/en/2016/12/embedding-d3js-charts-responsive-website-better-solution

在使用d3包装器的情况下，如plottable.js，请注意，最简单的解决方案可能是添加一个事件监听器，然后调用重绘制函数(在plottable.js中重绘制)。在plottable.js的情况下，这将非常有效(这种方法很少有文档):

    window.addEventListener("resize", function() {
      table.redraw();
    });