Javascript 调整窗口大小时，.data（…）字段的D3js值不会更改。有办法改变吗？

我正在d3上尝试一些新的东西，但我并不真正理解这个概念。不幸的是，代码也不起作用

我想做的是d3绘制两个矩形，一个在屏幕顶部，另一个在屏幕底部。如果查看

\u数据

，您会看到

y

的值是预定义的

输入数据时，将使用初始计算的

高度

，但当窗口调整大小时，

高度

值不会改变，这在逻辑上不应改变。但是我需要更改

\u data

中的

高度值

创建矩形后，还有其他要添加的功能，因此我不知道如何在
函数draw（）中输入（）…


var-width=window.innerWidth；
var height=window.innerHeight；
var svg=d3.select（'body'）
.append（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）；
变量_数据={
{
“颜色”：“黄色”，
“y”：0
},
{
“颜色”：“绿色”。
“y”：height-height/5/每次调用draw（）时，都需要计算数组中y的新值

另外，我刚刚在draw（）中重新构造了更新模式，它在调整窗口大小时更新第二个矩形的y属性

请参阅下面的代码和此处的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?
        }
      ];
    }

var-width=window.innerWidth；
var height=window.innerHeight；
var svg=d3.select（'body'）
.append（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）；
var_数据=[]；
draw（）；
d3.选择（窗口）。打开（“调整大小”，绘制）；
函数绘图（）{
calcData（）；
宽度=window.innerWidth；
属性（“宽度”，宽度）；
//添加矩形
var rects=svg.selectAll（'rect'）
.数据（_数据）；
console.log（_数据[1].y）；
console.log（rects）；
var xScale=d3.scale.ordinal（）
.domain（_数据）
.范围带（[10，宽度-10]）；
rects.exit（）.remove（）；
rects.enter（）
.append（'rect'）
.attr（“填充”，函数（d，i）{
返回d.color；
});
//更新逻辑
矩形属性（“x”，函数（d）{
返回xScale（d）；
})
.attr（“y”，函数（d）{
控制台日志（d.color，d.y）；
返回d.y；
})
.attr（“宽度”，xScale.rangeBand（）*0.95）
.attr（“高度”，20）；
}
函数calcData（）{
_数据=[
{
“颜色”：“黄色”，
“y”：0
},
{
“颜色”：“绿色”，
“y”：window.innerHeight-window.innerHeight/5//