D3 SVG沒有響應地調整大小

Question

我剛剛與D3握手，並希望在調整窗口大小時調整它的大小，我設法通過一些JavaScript在下面的示例中註釋掉了它，但是在那裏是一個thread here其中說，寬度和高度可以離開SVG元素，它會調整大小響應沒有javascript。可悲的是，這並不適用於我，我正在測試最新的IE11和Firefox。

1. 當我離開過寬度和高度，這隻能說明文字

     **width="960" height="500"** 
   

2. 當我取消對JS在底部它的工作原理

3. 當我包括寬度和高度尺寸沒有按」 t隨窗口大小變化

該代碼片段在下面，但不起作用，因爲我使用D3版本4和JQ版本3.x，t他的片段工具似乎只允許更早的版本。

如何在不將javascript取消註釋的情況下調整大小？ ！

我敢肯定這是一件愚蠢的和明顯的，但我一直停留在它的年齡..感謝

 $(function() { 
 
      var svg = d3.select("svg"), 
 
       width = +svg.attr("width"), 
 
       height = +svg.attr("height"), 
 
       radius = Math.min(width, height)/2, 
 
       g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
      var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 

 
      var pie = d3.pie() 
 
       .sort(null) 
 
       .value(function (d) { return d.population; }); 
 

 
      var path = d3.arc() 
 
       .outerRadius(radius - 10) 
 
       .innerRadius(0); 
 

 
      var label = d3.arc() 
 
       .outerRadius(radius - 40) 
 
       .innerRadius(radius - 40); 
 

 
      d3.csv("data.csv", function (d) { 
 
       d.population = +d.population; 
 
       return d; 
 
      }, function (error, data) { 
 
       if (error) throw error; 
 

 
       var arc = g.selectAll(".arc") 
 
        .data(pie(data)) 
 
        .enter().append("g") 
 
        .attr("class", "arc"); 
 

 
       arc.append("path") 
 
        .attr("d", path) 
 
        .attr("fill", function (d) { return color(d.data.age); }); 
 

 
       arc.append("text") 
 
        .attr("transform", function (d) { return "translate(" + label.centroid(d) + ")"; }) 
 
        .attr("dy", "0.35em") 
 
        .text(function (d) { return d.data.age; }); 
 
      }); 
 

 
      // Uncomment this to make it resize with the window width changes 
 

 
      //var aspect = width/height, 
 
      // chart = d3.select('svg'); 
 
      //d3.select(window) 
 
      // .on("resize", function() { 
 
      //  var targetWidth = $(window).width(); 
 
      //  chart.attr("width", targetWidth); 
 
      //  chart.attr("height", targetWidth/aspect); 
 
      // }); 
 

 

 
     });

 svg { 
 
      display: inline-block; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
     } 
 

 
     body { 
 
      display: inline-block; 
 
      position: relative; 
 
      width: 100%; 
 
      vertical-align: middle; 
 
      background-color:#ffffe0; 
 
     }

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
\t \t integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
\t \t crossorigin="anonymous"></script> 
 
<svg width="960" height="500" viewBox="0 0 900 600" preserveAspectRatio="xMidYMid meet"></svg>

data.csv：

age,population 
<5,2704659 
5-13,4499890 
14-17,2159981 
18-24,3853788 
25-44,14106543 
45-64,8819342 
=65,612463 

Answer 1

當您忽略寬度和高度屬性時，不能指望用svg.attr("width")來讀取它們。你真正想要得到的是視框財產寬度和高度：

$(function() { 
     var svg = d3.select("svg"), 
      width = svg.property("viewBox").baseVal.width, 
      height = svg.property("viewBox").baseVal.height, 
      radius = Math.min(width, height)/2, 
      g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    //... 
    });