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

例如我們想要當鼠標點擊水果的時候會出現黑色的框，再點擊一下黑色的框就會消失。

首先，我們應該給組件添加點擊事件：
fruitBowl.js

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

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

fruitBowl.js

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

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

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

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

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

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

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

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

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

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

fruitBowl.js

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

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

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。