相关疑难解决方法(0)

假设我有一个直方图脚本,可以构建一个960 500 svg图形.如何调整响应,以便调整图形宽度和高度是动态的？

<script> 

var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
    (data);

var width = 960,
    height = 500;

var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]); …

我有一个使用强制布局的图形,但它有一个固定的宽度w和高度h:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)

var force = d3.layout.force()
              .nodes(nodes)
              .links(links)
              .charge(-1600)
              .linkDistance(45)
              .size([w, h]); 

这导致svg图表尽管屏幕或浏览器窗口大小发生了变化但不会缩放或缩小.为了使其响应(即自动调整自身大小),我尝试使用viewBox和preserveAspectRatio属性:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "0, 0, 600, 400")
            .attr("preserveAspectRatio", "xMidYMid meet");

不幸的是,当我调整浏览器窗口大小时,这没有任何作用.我想知道力图是否.size([w, h])与此有关.

请详细说明如何使用力布局图来使用viewBox和preserveAspectRatio属性.