Question

我想反复使用选择。但更新方法不起作用。为什么会这样？

首选是否不能接受两个以上的数据绑定顺序？

// 1. prepair data
var enterData = [120, 70, 300, 80, 220];
var updateData = [300, 0, 30, 70, 320];
var exitData = [300, 80, 90, 40];

// 2. select virtual element and assign it variable
var rects = d3.select("#myGraph")
    .selectAll("rect");

// 3. enter method working.
function enter (rects, data){
  console.log("enter method!");
  rects.data(data)  
  .enter()  
    .append("rect") 
    .attr("class", "bar")   
    .attr("width", function(d,i){   
    return d;   
  })
    .attr("height", 20) 
    .attr("x", 0)   
    .attr("y", function(d, i){  
    return i * 25   
  })
}

// 4. but update not working    
function update (rects, data){
  console.log("update method!");

  // 5. without below selection phrase
    // var rects = d3.select("#myGraph")
  //  .selectAll("rect");

  rects.data(data)
    .attr("width", function(d,i){   
    return d;
  })
}

function exit (rects, data){
    console.log("exit method!");
    rects.data(data).exit().remove();
}

setTimeout( function(){
  enter(rects ,enterData)
}, 1500 )

setTimeout( function(){
  update(rects, updateData)
}, 3000 )

setTimeout( function(){
  exit(rects, exitData)
}, 4500 )

我知道如何修复它。但我不知道为什么。

https://jsfiddle.net/baram204/Lteby67L/6/

Answer 1

原因是最初你做的时候：

var rects = d3.select("#myGraph")
    .selectAll("rect");

rect div中没有#myGraph个DOM元素，因此选择为空。

在enter函数中，由于选择为空，我们为数据创建尽可能多的DOM并将数据绑定到DOM。

现在在update/exit功能中，您传递了相同的空选择。所以没有更新/退出。

正确的方法是这样做：

function update (rects, data){
  console.log("update method!", rects);

  // 5. re-select your data
     var rects = d3.select("#myGraph")
   .selectAll("rect");

  rects.data(data)
    .attr("width", function(d,i){   
        console.log(d)
    return d;
  })
}

工作代码here

当我将它们传递给另一个函数时，为什么选择更新不起作用

1 个答案: