Javascript 如何在D3中单击鼠标时冻结和解冻悬停线
我的朋友和我各自使用D3创建了一个图表,我们将其组合在一起,如下所示: 我们希望删除滑块,并将其替换为线形图中的直线悬停。当前,只要移动鼠标,悬停线就会返回年份Javascript 如何在D3中单击鼠标时冻结和解冻悬停线,javascript,d3.js,bar-chart,linegraph,Javascript,D3.js,Bar Chart,Linegraph,我的朋友和我各自使用D3创建了一个图表,我们将其组合在一起,如下所示: 我们希望删除滑块,并将其替换为线形图中的直线悬停。当前,只要移动鼠标,悬停线就会返回年份 chart1.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', chart1_width) // can't catch mouse events on a g element .attr('height
chart1.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', chart1_width) // can't catch mouse events on a g element
.attr('height', chart1_height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function(){ // on mouse out hide line, circles and text
d3.select(".mouseLine")
.style("opacity", "0");
d3.selectAll(".mouseCircle circle")
.style("opacity", "0");
d3.selectAll(".mouseCircle text")
.style("opacity", "0");
})
.on('mouseover', function(){ // on mouse in show line, circles and text
d3.select(".mouseLine")
.style("opacity", "1");
d3.selectAll(".mouseCircle circle")
.style("opacity", "1");
d3.selectAll(".mouseCircle text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
d3.select(".mouseLine")
.attr("d", function(){
yRange = y.range(); // range of y axis
var xCoor = d3.mouse(this)[0]; // mouse position in x
var xDate = x.invert(xCoor); // date corresponding to mouse x
d3.selectAll('.mouseCircle') // for each circle group
.each(function(d,i){
var rightIdx = bisect(data[1].values, xDate); // find date in data that right off mouse
yVal = data[i].values[rightIdx-1].VALUE;
yCoor = y(yVal);
var interSect = get_line_intersection(xCoor, // get the intersection of our vertical line and the data line
yRange[0],
xCoor,
yRange[1],
x(data[i].values[rightIdx-1].YEAR),
y(data[i].values[rightIdx-1].VALUE),
x(data[i].values[rightIdx].YEAR),
y(data[i].values[rightIdx].VALUE));
d3.select(this) // move the circle to intersection
.attr('transform', 'translate(' + interSect.x + ',' + interSect.y + ')');
d3.select(this.children[1]) // write coordinates out
.text(xDate.getFullYear() + "," + yVal);
yearCurrent = xDate.getFullYear();
console.log(yearCurrent)
return yearCurrent;
});
return "M"+ xCoor +"," + yRange[0] + "L" + xCoor + "," + yRange[1]; // position vertical line
});
});
});
我想知道如何才能使鼠标单击时,悬停线冻结在当前位置返回冻结位置的年份,并在再次单击时解冻?是
基本上添加了全局变量freezed,该变量在单击时切换,mousemove函数仅在其未冻结状态下执行其工作
var frozen = false;
.on('click', function(){ // on mouse click toggle frozen status
frozen = !frozen;
})
.on('mousemove', function() { // mouse moving over canvas
if(!frozen) {
...
}
});