我有多線圖，我想在其中單擊一條線并永久突出顯示它。我將以下代碼與單擊事件一起使用，但是在單擊并移動滑鼠后，該行回傳。
希望有人可以幫助我！
編輯：我還有一個包含在代碼片段中的 mouseover 和 mouseout 事件。
diagam.on('click', countryClick)
.on('mouseover, countryOver)
.on('mouseout, countryOut);
//Mouse event functions
function countryOver(event, d) {
d3.select(this)
.style('stroke', 'black')
.style('stroke-width', 5)
.attr('id', 'countryOver')
.selectAll('g')
.append('text')
.attr('class', 'tile-text')
.attr('x', x(dataByCountry.year) / 2)
.attr('y', y(dataByCountry) / 2)
.attr('text-anchor', 'middle')
.attr('font-size', '50')
.attr('fill', 'black')
.text(dataByCountry.name);
}
function countryOut(event, ) {
d3.select(this)
.style('stroke', 'green')
.style('stroke-width', 1.5)
.selectAll('g')
.append('text')
.attr('class', 'tile-text')
.attr('x', x(dataByCountry.year) / 2)
.attr('y', y(dataByCountry) / 2)
.attr('text-anchor', 'middle')
.attr('font-size', '50')
.attr('fill', 'black')
.text(dataByCountry.name)
}
function countryClick(event, d){
d3.select(this)
.style('stroke', 'red')
.style('stroke-width', 7)
.selectAll('g')
.append('text')
.attr('class', 'tile-text')
.attr('x', x(dataByCountry.year) / 2)
.attr('y', y(dataByCountry) / 2)
.attr('text-anchor', 'middle')
.attr('font-size', '50')
.attr('fill', 'black')
.text(dataByCountry.name)
}
uj5u.com熱心網友回復：
如果您想在滑鼠懸停時突出顯示該行并在單擊它時更改其顏色，則可以使用 CSS 根據其狀態設定路徑樣式。
看看這個例子：https ://codepen.io/ccasenove/pen/zYaoGpN
最初路徑只有類line，所以我們可以使用 d3 選擇它們，并且顏色在 CSS 中設定為黑色。在滑鼠懸停時，由于 CSS 規則，該類over被設定在將其變為綠色的元素上。在滑鼠移出時，該類over被洗掉。并且當點擊路徑時，該類selected被設定為將顏色更改為紅色。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/528788.html
上一篇：如何繪制閉合曲線？
下一篇：如何在正方形網格周圍添加填充？