D3 원형 패키지의 응답 비율 유지 - 반응 형 디자인

Question

그래서 D3.js의 거품 그래프에서 작업하고 있습니다 : http://bl.ocks.org/mbostock/4063269. 너비와 높이는 직경으로 결정됩니다. 그래서 저는 묻습니다.이 SVG 버블 클라우드를 만드는 방법과 가능하면 적은 코드로 응답하는 다른 SVG를 만드는 방법은 무엇입니까?

<script> 
var diameter = 628, 
    format = d3.format(",d"), 
    color = d3.scale.ordinal() 
     .range(["#FFFFFF", "#7ec0ee", "#0D2A46"]); 

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

function addChart(file, target){ 

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

d3.json(file, function(error, root) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 

     .text(function(d) { return d.className.substring(0, d.r/3); }); 
}); 
} 
addChart("DataGreatEnglishWriters.json", "dv.foo"); 
addChart("Dubliner.json", "div.bar"); 
addChart("2LeftFeet.json", "div.head"); 
// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 

Answer 1

여기에 언급 된 마이크의 예가있는 FIDDLE입니다.

var chart = $(".bubble"), 
    aspect = chart.width()/chart.height(), 
    container = chart.parent(); 

$(window).on("resize", function() { 
    var targetWidth = container.width(); 
    chart.attr("width", targetWidth); 
    chart.attr("height", Math.round(targetWidth/aspect)); 
}).trigger("resize"); 

은 본질적으로, 그에 따라 svg 다시 크기에 viewBox 및 preserveAspectRatio 속성을 사용합니다.