当拖动到超出范围时，D3画笔范围将从图表中消失

Question

I've put together a chart in D3 that uses a vertically-sliding brush with a circular handle, plus a horizontal line to show intersection with a curve:

. . . but the brush extent, handle and line all disappear from the chart when I drag the handle past point of extent = 0:

I've disabled the upper brush handle since this is a one-directional tool, but I suspect that may be the problem. I've also tried changing the margins to expose ">100% of the brush height", but the elements still disappear in the same way. Have I improperly defined the brush parameters or is this worth filing a ticket in the D3 repo?

Here's the complete example: http://bl.ocks.org/wboykinm/1a2806d828cb3fa64c4d

Thanks!

Answer 1

This is because at that point your brush has an extent of 0 and thus is empty. If you look at the source code , an empty brush will have its display set to none . You can see this at play if you inspect the g element with class of .resize.s with the browser developer tools.

One possible fix is to add this to a brushend listener:

// Add the brush to the Y axis, set to 10% of the extent
var brush = d3.svg.brush()
    .y(y)
    .extent([0,0.1])
    .on("brushend", function(){
        brushg.selectAll(".resize.s")
            .style("display","inline")
    }); 

Here is a PLUNK with this solution.

You may not have to deal with this once you start really working with the brush in your chart.