数据可视化【九】单向数据流交互

在这里插入图片描述

我们使用一下上上篇博客的代码。

例如我们想要当鼠标点击水果的时候会出现黑色的框，再点击一下黑色的框就会消失。

首先，我们应该给组件添加点击事件：
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');}