biểu đồ D3 phản hồi

Tôi có biểu đồ D3 này - khá nhiều trong số đó. Có cách nào để làm cho nó đáp ứng và sử dụng tỷ lệ phần trăm cho các biến chiều rộng và chiều cao, innerRadius, và outerRadius? Tôi đang làm việc trên một trang web đáp ứng và cần điều này để thay đổi dựa trên kích thước màn hình/kích thước trình duyệt.biểu đồ D3 phản hồi

jsfiddle đây: http://jsfiddle.net/BTfmH/1/

Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
html, 
body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

.chart-container { 
/* width:50%; 
    height:50%;*/ 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    var width = 350, 
     height = 350, 
     τ = 2 * Math.PI; 

    var arc = d3.svg.arc() 
     .innerRadius(100) 
     .outerRadius(135) 
     .startAngle(0); 

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
    .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 

    var background = svg.append("path") 
     .datum({endAngle: τ}) 
     .style("fill", "green") 
     .attr("d", arc); 

    var foreground = svg.append("path") 
    .datum({endAngle: .127 * τ}) 
     .style("fill", "grey") 
     .attr("d", arc); 

setInterval(function() { 
    foreground.transition() 
     .duration(750) 
     .call(arcTween, Math.random() * τ); 
}, 1500); 

    function arcTween(transition, newAngle) { 

    transition.attrTween("d", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 

     return function(t) { 

     d.endAngle = interpolate(t); 

     return arc(d); 
     }; 
    }); 
} 
</script>

Nguồn

2013-07-13 TechyDude

bản sao có thể có của [Whats cách tốt nhất để tạo bố cục trực quan d3.js đáp ứng?] (Http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -js-visualization-layout-responsive) – user456584

102

Bạn có thể làm thay đổi kích thước biểu đồ sử dụng một sự kết hợp của viewBox và preserveAspectRatio thuộc tính trên các yếu tố SVG.

Xem jsfiddle này cho ví dụ đầy đủ: http://jsfiddle.net/BTfmH/12/

var svg = d3.select('.chart-container').append("svg") 
    .attr("width", '100%') 
    .attr("height", '100%') 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    .attr('preserveAspectRatio','xMinYMin') 
    .append("g") 
    .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")");

Bạn thậm chí sẽ không cần một handler resize với phương pháp này.

Nguồn

2013-10-15 11:15:09

THANKS rất nhiều để được trợ giúp về điều này! Tôi đặc biệt đánh giá cao điều này vì nó đã không được trả lời/nhàn rỗi quá lâu! – TechyDude

@TechyDude, Không sao cả - tôi cần bản thân này và xem câu hỏi của bạn. Tôi không thể tìm thấy một câu trả lời tốt ở nơi khác để mở rộng ví dụ của bạn. –

@SamSehnert, Cảm ơn câu trả lời, tôi đã làm một cái gì đó tương tự ở đây trong https://jsfiddle.net/adityap16/11edxrnq/1/. Nhưng khi tôi chuyển nó vào React, các ô của tôi đang trở nên rất nhỏ, bạn có nghĩ ra được lý do nào không? –

Bạn có thể sử dụng window.innerWidth và window.innerHeight để có được kích thước của màn hình và thiết lập đồ thị của bạn cho phù hợp, ví dụ

var width = window.innerWidth, 
    height = window.innerHeight, 
    innerRadius = Math.min(width,height)/3, 
    outerRadius = innerRadius + 30;

Nguồn

2013-07-13 14:26:35

Cảm ơn phản hồi của bạn Lars! Điều đó chắc chắn làm việc về kích thước các biểu đồ dựa trên trang cửa sổ. Làm cách nào để tôi thay đổi kích thước với cửa sổ trình duyệt? – TechyDude

Bạn có thể sử dụng sự kiện 'onresize' (xem ví dụ [câu hỏi này] (http://stackoverflow.com/questions/641857/javascript-window-resize-event)) nhưng bạn sẽ phải tự vẽ lại. –

biểu đồ D3 phản hồi

Trả lời

Các vấn đề liên quan