使用d3创建一个矩形刷选器;设定合适的事件,当鼠标在散点图中滑动时,可以选中矩形刷选器内部的点;刷选完成后,柱状图中仅出现被刷选过的数据(国家)
时间: 2024-02-26 21:57:20 浏览: 18
好的,以下是一个简单的实现代码,希望能够对您有所帮助。
HTML部分:
```
<div id="scatterplot"></div>
<div id="barchart"></div>
<div id="brush"></div>
```
JS部分:
```
// 创建散点图
var scatterplot = d3.select("#scatterplot")
.append("svg")
.attr("width", width)
.attr("height", height);
// 创建柱状图
var barchart = d3.select("#barchart")
.append("svg")
.attr("width", width)
.attr("height", height);
// 定义刷选器范围
var brush = d3.brush()
.extent([[0, 0], [width, height]])
.on("end", brushended);
// 创建刷选器
var brushContainer = d3.select("#brush")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(brush);
// 定义刷选器结束事件
function brushended() {
// 获取刷选器的选择范围
var selection = d3.event.selection;
// 如果没有选择任何点,则将散点图和柱状图置为初始状态
if (!selection) {
scatterplot.selectAll("circle")
.classed("selected", false);
barchart.selectAll("rect")
.classed("selected", false);
return;
}
// 遍历所有散点,标记选中的散点
scatterplot.selectAll("circle")
.classed("selected", function(d) {
var x = xScale(d.x);
var y = yScale(d.y);
return x >= selection[0][0] && x <= selection[1][0] && y >= selection[0][1] && y <= selection[1][1];
});
// 根据选中的散点,更新柱状图
var selectedCountries = scatterplot.selectAll(".selected").data().map(function(d) {
return d.country;
});
barchart.selectAll("rect")
.classed("selected", function(d) {
return selectedCountries.indexOf(d.country) >= 0;
});
}
```
这段代码使用d3来创建了散点图、柱状图和矩形刷选器,并定义了相应的事件。当鼠标在散点图中滑动时,可以选中矩形刷选器内部的点;刷选完成后,柱状图中仅出现被刷选过的数据(国家)。
相关推荐
![rp](https://img-home.csdnimg.cn/images/20210720083646.png)
![rp](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![r](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)