如何在联接enter / exit块之外使用画笔更新SVG元素

问题描述

我试图用画笔更新'rect'元素，在联接enter / update / exit块之外更改其“填充”值。例如，我有下面的代码块可以工作：

// Build categorical X scale
var x = d3.scaleBand()
  .range([ 0,width ])
  .domain(data.axis.aa_mt)
  .padding(0.01);

// Build categorical Y scale
var y = d3.scaleBand()
  .range([ height,0 ])
  .domain(data.axis.aa_position)
  .padding(0.01);

// color scale
var score = data.values.map(o => o.score).filter(o => !!o);
var myColor = d3.scaleSequential()
  .domain([Math.min(...score),Math.max(...score)])
  .interpolator(d3.interpolateViridis);

// heatmap
var tiles = svg.selectAll('rect')
            .data(data.values,function(d) {return d.mt_aa+':'+d.position_aa;})
            .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) });

// add brush
svg.append('g')
      .call(d3.brush()                     
      .extent( [ [0,0],[width,height] ] )      
      .on("end",update1)
      );

// update tiles to apply "selected" class (where fill is black)
function update1() {
    extent = d3.event.selection;
    return tiles.classed("selected",function(d) { 
      return isBrushed(extent,x(d.mt_aa),y(d.position_aa)) });
}

// return T/F if tile is within brush coords
function isBrushed(brush_coords,x,y) {
     var x0 = brush_coords[0][0],x1 = brush_coords[1][0],y0 = brush_coords[0][1],y1 = brush_coords[1][1];
    return x0 <= x && x <= x1 && y0 <= y && y <= y1;
}

但是如果我将tiles替换为以下内容，则不会发生任何事情：

// create tiles with 'rect' elements
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) })
        .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(update) {
      return update;
    },function(exit){
        return exit
        .transition()
        .duration(1000)
        .style('opacity',0)
        .on('end',function() {
            d3.select(this).remove();
        });
    }
  )
  .transition()
  .duration(1000)
  .style("opacity",1);

实际上，根据控制台调试器，在classed内部调用的函数被完全跳过。我相当确定这与联接中的更新调用有关，但是我不确定该怎么办。

一些附加说明： 我正在使用d3版本5，这都是在r2d3 / shiny应用程序中发生的，其中data可以动态更改。本质上，我想要过渡data中的更改，但也希望能够使用画笔更改rect元素的样式。我可以在join语句中完成所有操作，但是我不确定是否可行。

编辑：

我发现如果我更改数据集，从连接块触发转换，笔刷将更改前一个数据集中具有值的那些单元格的图块，仍然不确定为什么会这样。

>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）