将鼠标悬停在影响其他图表的图表上d3.js
问题描述:
我有两个链接到相同数据源的条形图。将鼠标悬停在影响其他图表的图表上d3.js
当我将鼠标悬停在第一个图表上的一个条上时,我的目标是能够影响第二个图表上的关联条(例如突出显示这些条)。
目标与here相似。但使用我现有的代码,只要将鼠标悬停在某个图表上的某个条上,就会突出显示两个图表中的所有条形图。
有没有人有解决这个问题?由于
这里是我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
#chart_01 {
height: 40px;
position: relative;
width: 360px;
}
#chart_02 {
height: 40px;
position: relative;
width: 360px;
}
</style>
<meta charset = "UTF-8">
<script src = "https://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
</head>
<body>
<div id = "chart_01">
<h2>Chart 01</h2>
<script>
var source = [{
x: 3,
y: 6
}, {
x: 8,
y: 40
}, {
x: 9,
y: 10
}];
var canvas_01 = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 200)
canvas_01.selectAll(".sweetpoint")
.data(source)
.enter()
.append("rect")
.classed("sweetpoint", true)
.attr("width", function(data_){return data_.x * 40;})
.attr("height", 10)
.attr("y", function(data_, index_){return index_ * 30;})
.attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_){
d3.selectAll(".sweetpoint").style("fill", "#696969");
})
.on("mousemove", function(data_, index_){
})
.on("mouseout", function(data_, index_){
d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
})
</script>
</div>
<div id = "chart_02">
<h2>Chart 02</h2>
<script>
var canvas_02 = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 200)
canvas_02.selectAll(".sweetpoint")
.data(source)
.enter()
.append("rect")
.classed("sweetpoint", true)
.attr("width", function(data_){return data_.x * 10;})
.attr("height", 10)
.attr("y", function(data_, index_){return index_ * 30;})
.attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_){
d3.selectAll(".sweetpoint").style("fill", "#696969");
})
.on("mousemove", function(data_, index_){
})
.on("mouseout", function(data_, index_){
d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
})
</script>
</div>
</body>
</html>
答
我改写了你的代码。它是你需要的行为吗?请注意0事件的处理函数。在这里,您应该为悬停的酒吧设置适当的样式,您可以使用d3.select(this)
以及另一个图表上的关联酒吧获得相关酒吧,您可以使用悬停元素的索引获取该样式。
...
.on("mouseover", function(data_, index_) {
d3.select(this).style("fill", "#696969");
canvas_02
.selectAll('.sweetpoint')
.filter(function(d, i) {
return i === index_
})
.style("fill", "#696969");
})
...
var source = [{
x: 3,
y: 6
}, {
x: 8,
y: 40
}, {
x: 9,
y: 10
}];
var canvas_01 = d3.select("#chart_01")
.append("svg")
.attr("width", 500)
.attr("height", 200)
canvas_01.selectAll(".sweetpoint")
.data(source)
.enter()
.append("rect")
.classed("sweetpoint", true)
.attr("width", function(data_) {
return data_.x * 40;
})
.attr("height", 10)
.attr("y", function(data_, index_) {
return index_ * 30;
})
.attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_) {
d3.select(this).style("fill", "#696969");
canvas_02
.selectAll('.sweetpoint')
.filter(function(d, i) {
return i === index_
})
.style("fill", "#696969");
})
.on("mousemove", function(data_, index_) {})
.on("mouseout", function(data_, index_) {
d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
})
var canvas_02 = d3.select("#chart_02")
.append("svg")
.attr("width", 500)
.attr("height", 200)
canvas_02.selectAll(".sweetpoint")
.data(source)
.enter()
.append("rect")
.classed("sweetpoint", true)
.attr("width", function(data_) {
return data_.x * 10;
})
.attr("height", 10)
.attr("y", function(data_, index_) {
return index_ * 30;
})
.attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_) {
d3.select(this).style("fill", "#696969");
canvas_01
.selectAll('.sweetpoint')
.filter(function(d, i) {
return i === index_
})
.style("fill", "#696969");
})
.on("mousemove", function(data_, index_) {})
.on("mouseout", function(data_, index_) {
d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
})
#chart_01 {
height: 110px;
position: relative;
width: 360px;
}
#chart_02 {
height: 110px;
position: relative;
width: 360px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<div id="chart_01">
<h2>Chart 01</h2>
</div>
<div id="chart_02">
<h2>Chart 02</h2>
</div>
它!谢谢米哈伊尔。 – Fxs7576