Какой лучший способ сделать макет визуализации d3.js адаптивным? - PullRequest
Новая
       51

Какой лучший способ сделать макет визуализации d3.js адаптивным?

212 голосов
/ 22 февраля 2012

Предположим, у меня есть скрипт гистограммы, который создает графику 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

Ответы [ 11 ]

0 голосов
/ 20 июля 2014

Вы также можете использовать 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

Мы можем получить доступ к графику с помощью идентификатора месяц просмотра .

Я не буду вдаваться в подробностикод d3, я буду вводить только ту часть, которая необходима для адаптации к разным размерам экрана. 

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

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

Ширина задается путем получения ширины div с идентификатором month-view.

Высота в моем случае не должна включать всю площадь.У меня также есть текст над панелью, поэтому мне нужно рассчитать и эту область.Вот почему я идентифицировал область текста с помощью идентификатора responseivetext.Для расчета допустимой высоты панели я вычел высоту текста из высоты элемента div.

Это позволяет вам получить панель, которая будет принимать все различные размеры screen / div.Возможно, это не лучший способ сделать это, но он, безусловно, работает для нужд моего проекта.

Страница:
...