D3.js의 장치 크기에 따라 SVG의 크기를 변경 하시겠습니까?

Question

leaflet.js 및 d3.js를 사용하여지도 및 차트를 시각화하려고합니다. 보기 장치를 호환 가능하게 만들고 싶습니다. 하지만 내 차트와지도는 기기와 호환되지 않습니다. 간단한 막대 그래프를 도시하는 코드는 아래와 같다 :

function updateCharts(data){ 

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
width = 400 - margin.left - margin.right, 
height = 250 - margin.top; 
var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .05); 
var y = d3.scale.linear().range([ height, 0 ]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(20); 

x.domain(data.map(function(d) { return d.time; })); 
y.domain([0, d3.max(data, function(d) { return d.speed1; })]); 

var svg=d3.select("#bar").append("svg").attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom).append("g").attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

var transition = svg.transition().duration(750), delay = function(d, i) { 
    return i * 50; 
}; 
svg.append("text").attr("x", width/2).attr("y", 0).style("text-anchor", 
     "middle").text("Speed of Lane1 Vs Time"); 

//Create X axis label 
svg.append("text") 
    .attr("x", width/2) 
    .attr("y", height + margin.bottom) 
    .style("text-anchor", "middle") 
    .text("Time"); 

svg.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 0-margin.left) 
    .attr("x",0 - (height/2)) 
    .attr("dy", "1em") 
    .style("text-anchor", "middle") 
    .text("Speed"); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .attr("x",5) 
    .style("text-anchor", "middle"); 

svg.selectAll("rect") 
    .data(data) 
    .enter().append("rect").transition().delay(0) 
    .style("fill", "red") 
    .attr("x", function(d,i) { return x(d.time); }) //v 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.speed1); }) 
    .attr("height", function(d) { return height - y(d.speed1); }); 
//function(d){return " "+d.datetime;} 

//transition.select(".y.axis").call(yAxis); 

// New SVG 
} 

는 HTML에서 I는 다음과 같은 장치의 호환성 메타 태그를 추가 한 다음 deveice 크기가 작은

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

하더라도 수평 스크롤이 나타난다 . 하지만 난 그런 스크롤바를 가로로보고 싶지 않아. 차트와지도를 장치 너비에 맞추기를 원합니다. 아무도 친절하게 나를 해결할 수 있습니까?

Answer 1

예 (참고 : jQuery를 사용) :

는

var $graphic = $('#graphic'); 
function drawGraphic() { 
    var margin = { top: 10, right: 10, bottom: 30, left: 30 }; 
    var width = $graphic.width() - margin.left - margin.right; 
    $graphic.empty(); 
    // ... code to create the chart ... 
} 
d3.csv("data.csv", function(data) { //loading data, may differ 
    // ... manipulate data here ... 
    drawGraphic(); 
    window.onresize = drawGraphic; 
} 

는 D3 반응 차트를 기반으로하는 방법은 여기에 설명 : http://blog.apps.npr.org/2014/05/19/responsive-charts.html

내 예를 들어 여기에 설명되어 있습니다 : http://bl.ocks.org/michalskop/2fa7d4c0ae029c36ba4e

여기에 직접보기 : http://bl.ocks.org/michalskop/raw/2fa7d4c0ae029c36ba4e/

리플렛 기반 반응 맵에 대한 나의 데모 : http://bl.ocks.org/michalskop/raw/001f6182db52d08f4925/