.data（...）フィールドのD3js値は、ウィンドウのサイズ変更時に変更されません。それを変更する方法はありますか？

Question

私はd3で何か新しいことをしようとしていて、私はそのコンセプトを本当に理解していません。残念ながら、コードはどちらも動作しません。私がやろうとしています何

はd3は2つの長方形上に1画面の下部に他を描画しています。 _dataを見ると、yという値があらかじめ定義されていることがわかります。

データが入力されると、heightが計算されますが、ウィンドウのサイズが変更されると、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の新しい値を計算する必要があります。

また、私は引き分け（）内の更新パターンを再編し、ウィンドウのサイズが変更されたときは、第2矩形のy属性を更新します。作業が完了したときにhttps://embed.plnkr.co/iCczR7wlSwbO46JDMPr9/

正しいとして答えをマークしてください：

は以下のコードと、ここplunkerを参照してください！

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? 
     } 
     ]; 
    }