D3選択ハイライト（効率？）

Question

私は、100を超える多くの矩形の単純なビジュアルを持っています。審美的な目的のために、私はマウスクリックで高い照明効果を作りたいと思っています。私はまた、ユーザーが新しい矩形をクリックするとその効果を取り除くことによって、この効果をやや直感的にしたいと思っていました。しかし、私はd3.selectAll()コールに頼らずにこれを動作させることができませんでしたので、このプロジェクトがより大きくなるなら、このアプローチが理想的ではないかもしれないと思っています。このコードは、私はそれがやりたいことないが、おそらく唯一のこれまでの任意の時間を与えるのを心配する1つの他のhighlight矩形があるかもしれませんけれども

.on('click.highlight', function() { 
//set any previously highlighted rects back to normal color/brightness 
    d3.selectAll('.highlight').transition().duration(250) 
     .style('fill', function(d) { return d3.rgb(d.color)}) 

    d3.select(this).classed('highlight',true); 

//now it's safe to assign the current highlighted rect a brighter hue... i think 
    d3.select(this).transition().duration(250) 
     .style('fill', function(d) { return d3.rgb(d.color).brighter(.5)}) 
}) 

：ここではコードです。もう一度、私はd3.selectAll()を使用していることをここで保証していません。

とにかく、より効率的な方法がありますか？可能であれば、私はそれをすべて.on('click')の機能の中にとどめたいと思います。

Answer 1

.selectAllの使用を避けたい場合は、最後にクリックされた矩形を含むrectの1つを選択して作成することができます。あなたは長方形をクリックするたび：以前に選択のハイライトを消し

1. は選択が
2. ハイライト私が使用

を新たに選択した矩形を最近クリックされた矩形を反映する

更新をRECT強調表示しました変数highlightedRectは、上記のワークフローを可能にする選択肢を保持する：

var svg = d3.select("body").append("svg") 
 
    .attr("width",600) 
 
    .attr("height",400); 
 
    
 
var highlightedRect = d3.select(null); 
 

 
var rects = svg.selectAll("rect") 
 
    .data(d3.range(1600)) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("y",function(d) { return Math.floor(d/50)*12; }) 
 
    .attr("x",function(d) { return d%50 * 12 }) 
 
    .attr("width",11) 
 
    .attr("height",11) 
 
    .attr("stroke","white") 
 
    .on("click",function(d) { 
 
    // Recolor the last clicked rect. 
 
    highlightedRect.attr("fill","black"); 
 
    // Color the new one: 
 
    highlightedRect = d3.select(this); 
 
    highlightedRect.attr("fill","steelblue"); 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>