D3選擇亮點（效率？）

我有很多簡單的視覺效果，超過100我會說。出於美學目的，我想在鼠標點擊時創建高光效果。我也想通過一旦用戶點擊一個新的矩形來消除這種效果，使這種效果有點直觀。然而，如果沒有訴諸d3.selectAll()的呼叫，我就無法實現這個目標，所以我認爲如果這個項目變得更大，這種方法可能並不理想。下面是代碼：D3選擇亮點（效率？）

.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)}) 
})

雖然這段代碼做什麼，我想它做的事，但據推測有可能永遠只能是1個highlight RECT擔心在任何給定的時間。所以再次，我不確定在這裏使用d3.selectAll()是必要的。

那麼無論如何，有沒有更高效的方法？如果可能的話，我想將它全部保存在一個.on('click')函數中。

來源

2017-08-04 Arash Howaida

我所做的唯一更改是限制選擇。而不是使用'd3.selectAll'，使用'rect'的現有父選擇。像'g'或'svg'這樣的東西都屬於它們。這限制了底層查詢選擇器從搜索整個文檔。 – Mark

爲什麼不保留突出顯示的矩形的外部引用？ https://jsfiddle.net/k9qz8jg7/沒有必要擺弄類和重新選擇。 – altocumulus

Arash，儘管這個問題在SO中不是完全* off-topic *，因爲你有一個**工作代碼**，並且你正在尋求關於**最佳實踐**和**效率**的建議，你應該考慮開始使用代碼審查：https://codereview.stackexchange.com/ –

如果您希望避免使用.selectAll，您可以創建一個包含最後點擊矩形的rect的選擇。每次點擊一個矩形時間：

unhighlight之前選擇的高亮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>

來源

2017-08-04 16:00:34

幾乎相同，在我的[評論]（https://stackoverflow.com/questions/45510657/d3-selection-highlight-efficiency#comment77983225_45510657）。但是，我懶得自己寫一個完整的答案，並希望沒有人會問我這麼做;-)幹得好！ – altocumulus

是的，我注意到它出現就像我正要敲擊提交按鈕 - 之後我檢查了小提琴，並看到它是同樣的解決方案 - 不得不說我喜歡隨機矩形美學。 –

D3選擇亮點（效率？）

回答

相關問題