我們使用一下上上篇博客的代碼。

例如我們想要當(dāng)鼠標(biāo)點擊水果的時候會出現(xiàn)黑色的框，再點擊一下黑色的框就會消失。

首先，我們應(yīng)該給組件添加點擊事件：
fruitBowl.js

gruopAll.on('click', d => onClick(d.id));

這個on函數(shù)第一個參數(shù)是事件的類型，例如這里就是點擊事件click，后一個就是點擊這個組件的時候所調(diào)用的函數(shù)。

fruitBowl.js

const onClick = id => {gruopAll.select('circle').attr('stroke-width', '5px').attr('stroke', d=> d.id===id? selectedColor(d): 'none');};

然后在這個函數(shù)中我們設(shè)置所點擊的圓形的邊框。

為了實現(xiàn)單擊出現(xiàn)邊框，雙擊邊框消失，我們給對象添加一個flag屬性

const makeFruit = (type, i) =>( {type,id : i,flag : false } );let fruits = d3.range(5).map((d,i) => makeFruit('apple', i) );

然后通過selectedColor()函數(shù)返回一個顏色：
fruitBowl.js

const selectedColor = d => {if(d.flag === false){d.flag = true;return 'black';} else{d.flag = false;return 'none';}}

這個函數(shù)的邏輯就是，如果這個水果之前已經(jīng)被選定（已經(jīng)單擊）了，那么就返回none消除邊框，如果沒有選定，那么就返回一個顏色，并且更改flag屬性。

通過上面的代碼我們就可以實現(xiàn)單擊出現(xiàn)邊框，雙擊邊框消失的效果。

vizhub代碼：https://vizhub.com/Edward-Elric233/166c74b3db394cc78cffac9eaae609ec

而如果我們想要實現(xiàn)的是當(dāng)鼠標(biāo)滑過某個水果的時候出現(xiàn)邊框，當(dāng)鼠標(biāo)移出某個水果的時候邊框消失的效果的時候邊框消失的效果的話我們可以添加mouseover和mouseout事件。

fruitBowl.js

gruopAll.on('mouseover', d => setSelectedFruit(d.id)).on('mouseout', ()=> setSelectedFruit(null));

這里的setSelectedFruit函數(shù)和上面的onClick函數(shù)的效果類似，不同的地方在于這里只需要簡單的根據(jù)id設(shè)置邊框顏色即可，不要根據(jù)flag屬性進(jìn)行判斷。因為當(dāng)鼠標(biāo)移出組件的時候邊框會自動消失。

fruitBowl.js

const selectedColor = d => {// if(d.flag === false){// d.flag = true;return 'black';// } else{// d.flag = false;// return 'none';// }}const setSelectedFruit = id => {gruopAll.select('circle').attr('stroke-width', '5px').attr('stroke', d=> d.id===id? selectedColor(d): 'none');}

vizhub代碼：https://vizhub.com/Edward-Elric233/bc3fff96533d40f0bb915bc7fedde895

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的数据可视化【九】单向数据流交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。