画笔和过渡并存

Question

我正在使用 d3.js，但遇到了问题。我有一个图表，在该图表中我使用画笔功能来调整轴的比例。当我刷时，我调用函数updateChart：var brush = d3.brush()                    .extent( [ [0,0], [width,height] ] )     .on("end", updateChart)updateChart功能在哪里：function updateChart() {        extent = d3.event.selection        if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);              x = d3.scaleTime()                .domain(d3.extent(data, function(d) {                 return new Date(d.valueX);}))                .rangeRound([0, width]);                y = d3.scaleLinear()                .domain([d3.min(data, function(d){return d.valueY;}),                         d3.max(data, function(d){return d.valueY;})])                .range([ height, 0]);        }else{            x.domain([ x.invert(extent[0][0]), x.invert(extent[1][0]) ])            y.domain([ y.invert(extent[1][1]), y.invert(extent[0][1]) ])            scatter.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done        }        // Update axis and circle position        xAxis.transition().duration(1000).call(d3.axisBottom(x).tickFormat(multiFormat));        yAxis.transition().duration(1000).call(d3.axisLeft(y))        scatter        .selectAll("circle")        .transition().duration(1000)        .attr("cx",function(d) {return x(new Date(d.valueX))} )        .attr("cy", function (d) { return y(d.valueY); } )    }我还有一个功能，当我把鼠标放在一个圆圈上时，它会显示我的信息。area.on("mouseover", highlight)var highlight = function(d) {            var selected_specie = d.Group            d3.selectAll(".dot")            .transition()            .duration(200)            .style("fill", "lightgrey")            .attr("r", 3)问题是：当我把鼠标放在一个圆圈上时，过渡就完成了。鼠标悬停功能不允许您正确完成过渡。有什么方法可以在我进行转换时停止监听鼠标事件？

Answer 1

可以使用以下代码停止事件：

var brush = d3.brush()                 // Add the brush feature using the d3.brush function

  .extent( [ [0,0], [width,height] ] ) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area

  .on("start", function () {(scatter.attr("pointer-events","none"))})

  .on("end", updateChart)

这样您就可以在画笔开始时停止事件。在 updateChart 函数中，最后您必须再次启动它：

setTimeout(function (){scatter.attr("pointer-events","all");},1001);

这对我有用。