.data（...）字段的D3js值在窗口大小調整時不會更改。有沒有辦法改變它？

Question

我正在嘗試d3上的新功能，並且我不太瞭解這個概念。不幸的是，代碼也不起作用。

我想要做的是d3在屏幕的上方和下方繪製兩個矩形。如果你看看_data，你會發現y的值是預定義的。

當數據進入時，使用初始計算的height，但當窗口調整大小時，值不會改變，這在邏輯上應該不會改變。但我需要在_data中的height值進行更改。

創建矩形後還有其他要添加的功能，所以我不知道如何在function draw() 或.data(_data).enter()...。

var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

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

 
var _data = { 
 
    { 
 
    "color": "yellow", 
 
    "y": 0 
 
    }, 
 
    { 
 
    "color": "green". 
 
    "y": height - height/5 //<- this data especially the hight value does not change .data(_data) on widow resize is there a way to change the data entered or at least the "y" value on window resize? 
 
    } 
 
}; 
 

 
var rects = svg.selectAll('rect') 
 
    .data(_data) //<- This is where the problem is 
 
    .enter() 
 
    .append('rect') 
 
    .attr("fill", function(d, i) { 
 
    return d.color; 
 
    }); 
 

 
draw(); 
 

 
d3.select(window).on("resize", draw); 
 

 
function draw() { 
 

 
    width = window.innerWidth; 
 

 
    svg.attr("width", width) 
 

 
    var xScale = d3.scale.ordinal() 
 
    .domain(_data) 
 
    .rangeBands([10, width - 10]); 
 

 
    rects.attr({ 
 
    "x": function(d) { 
 
     return xScale(d); 
 
    }, 
 
    "y": function(d) { 
 
     return d.y; 
 
    }, 
 
    "width": xScale.rangeBand() * 0.95, 
 
    "height": 20 
 
    }); 
 

 
}

<script src="https://d3js.org/d3.v3.min.js"></script>

我清楚地看到我在做什麼不行的，任何替代的解決方案是極大的讚賞。

Answer 1

每次調用draw（）時，都需要計算數組中y的新值。

此外，我只重構了draw（）中的更新模式，並在窗口大小調整後更新了第二個矩形的y屬性。

請參見下面的代碼和這裏plunker：https://embed.plnkr.co/iCczR7wlSwbO46JDMPr9/

請註明的答案是正確的，當你完成了！

var width = window.innerWidth; 
    var height = window.innerHeight; 

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

    var _data = []; 

    draw(); 

    d3.select(window).on("resize", draw); 

    function draw() { 
     calcData(); 
     width = window.innerWidth; 
     svg.attr("width", width); 

     //add rects 
     var rects = svg.selectAll('rect') 
     .data(_data); 

     console.log(_data[1].y); 
     console.log(rects); 

     var xScale = d3.scale.ordinal() 
     .domain(_data) 
     .rangeBands([10, width - 10]); 

    rects.exit().remove(); 

    rects.enter() 
     .append('rect') 
     .attr("fill", function(d, i) { 
     return d.color; 
     }); 

    //update logic 
     rects.attr("x", function(d) { 
      return xScale(d); 
     }) 
     .attr("y", function(d) { 
      console.log(d.color, d.y); 
      return d.y; 
     }) 
     .attr("width", xScale.rangeBand() * 0.95) 
     .attr("height", 20); 

    } 

    function calcData(){ 
     _data = [ 
     { 
      "color": "yellow", 
      "y": 0 
     }, 
     { 
      "color": "green", 
      "y": window.innerHeight - window.innerHeight/5 //<- this data especially the hight value does not change .data(_data) on widow resize is there a way to change the data entered or at least the "y" value on window resize? 
     } 
     ]; 
    }