我正在創建美國的人口地圖。我有地圖和圖例作業，但我制作了一個下拉選單，允許我按種族進行過濾。這有效并更改了地圖和圖例上的資料，但我遇到了一個問題，即圖例文本顯示新范圍以及所有以前的范圍，因為我更改了下拉選單。有沒有辦法讓它不與以前的文本重疊，而是只顯示一個正確的文本？我正在將 D3 與 React 一起使用。
這是我傳奇的代碼：
svg.append("g")
.attr("transform", "translate(580,20)")
.append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"}))
我的顏色變數的代碼：
const color = d3.scaleQuantile([start/divider,end/divider], d3.schemeYlOrRd[9])
開始和結束的變化取決于人口規模的大小
編輯/更新： 我找到了解決我的問題的方法，我只是不確定它是否是最佳實踐，或者是否有另一種方法。我給了它一個背景顏色，這樣以前的資訊就被掩蓋了
代碼：
svg.append("g")
.attr("transform", "translate(580,20)")
.append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"}))
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "grey")
svg.append("g")
.attr("transform", "translate(580,20)")
.append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"}))
uj5u.com熱心網友回復：
每次你svg.append('g').transform(...).append(() => Legend())都在添加一個新<g>元素。
而是將<g>選擇存盤在變數中，然后在添加新圖例之前洗掉其內容。
const legendG = svg.append('g').attr('transform', 'translate(580, 20)')
function renderLegend(legendOptions) {
legendG.selectAll('*').remove() // removes everything inside
legendG.append(() => Legend(legendOptions))
}
// now call the `renderLegend` function every time you change something from the menu
并回答您的問題，如果您所做的是一個好的做法。我會說不是，因為您只是在每次用戶在選單中選擇某些內容時添加元素，并且它只是占用越來越多的記憶體來存盤 DOM。對性能不好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/422080.html
標籤：
上一篇：使用d3顏色創建d3線性顏色圖例
下一篇：D3條形圖水平平移