让d3.js可视化布局反应灵敏的最好方法是什么?

假设我有一个直方图脚本，构建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]);

var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(histogram)
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height - y(d.y); })
    .attr("height", function(d) { return y(d.y); });

svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height);

</script>

完整的直方图示例要点如下: https://gist.github.com/993912

当前回答

肖恩·阿伦的回答很棒。但你可能不想每次都这么做。如果你把它放在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上构建了这个功能。

2014-12-18 07:38:21

其他回答

肖恩·阿伦的回答很棒。但你可能不想每次都这么做。如果你把它放在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上构建了这个功能。

2014-12-18 07:38:21

如果你正在使用d3.js到c3.js的响应性问题的解决方案是相当简单的:

var chart = c3.generate({bindTo:"#chart",...});
chart.resize($("#chart").width(),$("#chart").height());

生成的HTML是这样的:

<div id="chart">
    <svg>...</svg>
</div>

2014-12-29 23:30:20

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

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

2016-05-05 16:03:28

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

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

2018-04-26 17:50:44

这里有很多复杂的答案。

基本上你所需要做的就是抛弃width和height属性，转而使用viewBox属性:

width = 500;
height = 500;

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`)

如果你有边距，你可以把它们加到宽/高中，然后在后面加上g，像平常一样变换它。

2020-06-26 06:25:03

让d3.js可视化布局反应灵敏的最好方法是什么?

推荐文章

最新文章

标签