Масштабирование диаграммы D3 до размера контейнера

Question

Я хочу масштабировать эту гистограмму до размера ее контейнера. Идеально сделать что-то вроде w = '100%', h = '100%'. Как я могу это сделать?

http://jsfiddle.net/mo363jm7/

<div class="test" style="height:50px;width:100px;overflow:hidden"></div> 

//Width and height 
var w = 200, 
    h = 100, 
    barPadding = 1, 
    dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
       11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

//Create SVG element 
var svg = d3.select(".test") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) { 
     return i * (w/dataset.length); 
    }) 
    .attr("y", function(d) { 
     return h - (d * 4); 
    }) 
    .attr("width", w/dataset.length - barPadding) 
    .attr("height", function(d) { 
     return d * 4; 
    }) 
    .attr("fill", function(d) { 
     return "rgb(0, 0, " + (d * 10) + ")"; 
    }); 

Answer 1

Вы можете задать для ширины вашего контейнера (или любой данный элемент) со стильной функцией, например:

var width = parseInt(d3.select(".test").style("width"),10); 
    var height = parseInt(d3.select(".test").style("height"),10); 

последний параметр (10) указывает, что вы хотите использовать десятичную систему (если я не ошибаюсь).

Таким образом, вы можете установить ширину вашего элемента svg этой ширины. Я бы даже предложил вам сделать функцию из нее и вызвать эту функцию при событии изменения размера, поэтому ваш SVG будет выглядеть как жидкость/отзывчивый элемент.

вы можете сделать это следующим образом:

d3.select(window).on('resize', function(){/* your svg and chart code */}); 

EDIT: На Перечитывая свой вопрос, мне кажется, что я, возможно, не понял ваш вопрос. D3 имеет функции масштабирования для масштабирования ваших данных, чтобы он вписывался в ваш svg-контейнер. Если ваш элемент div не реагирует, вы должны просто установить ширину и высоту svg так же, как ваш элемент div, и использовать шкалы данных, чтобы ваша диаграмма соответствовала контейнеру svg. Более подробную информацию о весах вы можете найти здесь: quantitative scales

Answer 2

попытка изменить высоту и ширину дел до ее высоты колонны и ширины, как этот http://jsfiddle.net/elviz/mo363jm7/2/

<div class="test" style="height:100px;width:200px;overflow:hidden"></div>