.data(...) 字段的 D3js 值在 window 调整大小时不会改变。有没有办法改变它？

Question

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

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

当数据进入时，使用初始计算的height，但是当window调整大小时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() 中重组了更新模式，并在 window 调整大小时更新了第二个矩形的 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?
        }
      ];
    }

.data(...) 字段的 D3js 值在 window 调整大小时不会改变。有没有办法改变它？

D3js value of .data(...) field does not change on window resize. Is there a way to change it?

javascript

window-resize

d3.js