[Solved]-D3js value of .data(...) field does not change on window resize. Is there a way to change it?-d3.js

You need to calculate the new value for y in the array every time draw() is being called.

Also, I just restructured the update pattern in draw() and it updates the y attribute of the second rect when the window is resized.

See code below and a plunker here: https://embed.plnkr.co/iCczR7wlSwbO46JDMPr9/

Please mark the answer as correct when you are done!

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