画笔和过渡并存

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);这对我有用。