D3.js 如何使用d3v5连接语法更新现有的svg元素

我试图制作一个热图，其中x和y单元格值可以保持不变，但“填充”属性可以根据数据进行更改。我试着这样做：

var tiles = svg.selectAll('rect')
            .data(data.values, function(d) {return d.mt_aa+':'+d.position_aa;})


// set up the enter/update/exit block
tiles.join(
    function(enter) {              
        return enter
        .append("rect")                                      
        .attr("x", function(d) {return x(d.mt_aa) })                         // set x coordinate
        .attr("y", function(d) {return y(d.position_aa) })                   // set y coordinate
        .attr("width", x.bandwidth() )                                       // set tile width
        .attr("height", y.bandwidth() )                                      // set tile height
        .style("fill", function(d) {return myColor(d.score) })               // set tile fill based on viridis pallete
        .style("opacity", 0);                                                // set opacity as 0 so elements are added but not visible
    },
    function(update) {
      return update
        .transition()
        .duration(1000)                                                      
        .attr("x", function(d) {return x(d.mt_aa) })                      
        .attr("y", function(d) {return y(d.position_aa) })                  
        .attr("width", x.bandwidth() )                                   
        .attr("height", y.bandwidth() )                                    
        .style("fill", function(d) {return myColor(d.score) })               
        .style("opacity", 0);
    },
    function(exit){                                         
        return exit
        .transition()                                                 
        .duration(1000)
        .style('opacity', 0)                                         
        .on('end', function() {                                              
            d3.select(this).remove();
        });
    }
  )
  .transition()                                                
  .duration(1000)
  .style("opacity", 1);

这主要是有效的，适当的转换等，但只有当一个或多个热图单元是新的。如果我传递的数据没有变化，但填充（d.分数）没有变化/更新。我怀疑发生这种情况是因为没有添加或删除任何内容，就d3而言，没有任何内容需要更新，并且更新块从不执行。然而，我不确定如何使用D3V5中的连接语法来解决这个问题

更新了@anbnyc建议的工作答案

// create tiles with 'rect' elements
var tiles = svg.selectAll('rect')                                               // from our svg select the rectangle elements, important for the enter/update/exit block below
            .data(data.values, function(d) {return d.mt_aa+':'+d.position_aa;}) // bind the data to the rect selection
            
const t = svg.transition()
             .duration(1000);

// set up the enter/update/exit block
tiles.join(
    enter => enter    
        .append("rect")                                                      
        .attr("x", function(d) {return x(d.mt_aa) })                       
        .attr("y", function(d) {return y(d.position_aa) })                  
        .attr("width", x.bandwidth() )                                       
        .attr("height", y.bandwidth() )                                     
        .style("fill", function(d) {return myColor(d.score) })              
        .style("opacity", 0)
        .call(enter => enter.transition(t)
                            .style("opacity", 1)),
    update => update                                                  
        .attr("x", function(d) {return x(d.mt_aa) })                      
        .attr("y", function(d) {return y(d.position_aa) })                  
        .attr("width", x.bandwidth() )                                   
        .attr("height", y.bandwidth() )
        .style("opacity", 0)
        .call(update => update.transition(t)
                              .style("fill", function(d) {return myColor(d.score) })               
                              .style("opacity", 1)),
    exit => exit
            .style('opacity', 0)
            .call( exit => exit.transition(t)
            .remove())
  )

---

update

函数需要返回一个选择，但它当前正在返回一个转换。使用

.call

将转换应用于

加入

中的选择。参见

中的示例，您的

更新

函数需要返回一个选择，但它当前正在返回一个转换。使用

.call

将转换应用于

加入

中的选择。请参见中的示例