javascript - .data(...) 字段的 D3js 值在窗口大小调整时不会更改。有办法改变吗？

Question

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

我想做的是 d3 绘制两个矩形，一个在屏幕的顶部，另一个在屏幕的底部。如果您查看_data，您会发现y 的值是预定义的。

当数据输入时，使用初始计算的高度，但是当窗口调整大小时，高度值不会改变，从逻辑上讲，这不应该改变。但我需要更改 _data 中的 height 值。

创建矩形后，还需要添加其他功能，所以我不知道函数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 属性。

请参阅下面的代码和一个插件: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?
        }
      ];
    }