让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

当前回答

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

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

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);

享受吧!

2012-02-22 22:55:06

其他回答

不使用ViewBox

下面是一个不依赖viewBox的解决方案的例子:

关键在于更新用于放置数据的尺度范围。

首先，计算你的原始纵横比:

var ratio = width / height;

然后，在每次调整大小时，更新x和y的范围:

function resize() {
  x.rangeRoundBands([0, window.innerWidth]);
  y.range([0, window.innerWidth / ratio]);
  svg.attr("height", window.innerHeight);
}

请注意，高度是基于宽度和长宽比，所以你的原始比例是保持不变的。

最后，“重绘”图表——更新任何依赖于x或y刻度的属性:

function redraw() {
    rects.attr("width", x.rangeBand())
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y.range()[1] - y(d.y); })
      .attr("height", function(d) { return y(d.y); });
}

注意，在调整矩形的大小时，你可以使用y范围的上界，而不是显式地使用height:

.attr("y", function(d) { return y.range()[1] - y(d.y); })

2015-11-21 17:51:02

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

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

为了提高速度，我还添加了简化的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);

享受吧!

2012-02-22 22:55:06

D3数据连接的基本原则之一是它是幂等的。换句话说，如果重复计算使用相同数据的数据连接，则呈现的输出是相同的。因此，只要你正确地渲染图表，注意你的进入，更新和退出选择-当大小发生变化时，你所要做的就是重新渲染整个图表。

还有一些其他的事情你应该做，一个是取消窗口调整大小处理程序，以抑制它。此外，这应该通过测量包含元素来实现，而不是硬编码宽度/高度。

作为替代方案，下面是使用d3fc呈现的图表，d3fc是一组正确处理数据连接的D3组件。它还有一个笛卡尔图，可以测量它所包含的元素，从而很容易创建“响应性”图表:

// create some test data
var data = d3.range(50).map(function(d) {
  return {
    x: d / 4,
    y: Math.sin(d / 4),
    z: Math.cos(d / 4) * 0.7
  };
});

var yExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.y; },
    function(d) { return d.z; }
  ])
  .pad([0.4, 0.4])
  .padUnit('domain');

var xExtent = fc.extentLinear()
  .accessors([function(d) { return d.x; }]);

// create a chart
var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear())
  .yDomain(yExtent(data))
  .yLabel('Sine / Cosine')
  .yOrient('left')
  .xDomain(xExtent(data))
  .xLabel('Value')
  .chartLabel('Sine/Cosine Line/Area Chart');

// create a pair of series and some gridlines
var sinLine = fc.seriesSvgLine()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.y; })
  .decorate(function(selection) {
    selection.enter()
      .style('stroke', 'purple');
  });

var cosLine = fc.seriesSvgArea()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.z; })
  .decorate(function(selection) {
    selection.enter()
      .style('fill', 'lightgreen')
      .style('fill-opacity', 0.5);
  });

var gridlines = fc.annotationSvgGridline();

// combine using a multi-series
var multi = fc.seriesSvgMulti()
  .series([gridlines, sinLine, cosLine]);

chart.plotArea(multi);

// render
d3.select('#simple-chart')
  .datum(data)
  .call(chart);

你可以在这个代码库中看到它的作用:

https://codepen.io/ColinEberhardt/pen/dOBvOy

在这里，您可以调整窗口的大小，并验证图表是否被正确重新渲染。

请注意，作为一个充分的披露，我是d3fc的维护者之一。

2016-06-26 18:00:05

如果你正在使用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

肖恩·阿伦的回答很棒。但你可能不想每次都这么做。如果你把它放在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可视化布局反应灵敏的最好方法是什么?

推荐文章

最新文章

标签