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

Question

我在 D3 中制作了一个图表，它使用带有圆形 handle 的垂直滑动画笔，以及一条水平线来显示与曲线的交点:

. . .但是当我将 handle 拖过 extent = 0 点时，画笔范围、 handle 和线条都从图表中消失了:

我已经禁用了上部刷柄，因为这是一种单向工具，但我怀疑这可能是问题所在。我也尝试过更改边距以显示“> 100% 的画笔高度”，但元素仍然以相同的方式消失。我是否错误地定义了画笔参数，或者这值得在 D3 存储库中提交一张票吗？

这是完整的示例:http://bl.ocks.org/wboykinm/1a2806d828cb3fa64c4d

谢谢!

Answer 1

这是因为此时您的画笔的范围为 0，因此是空的。如果您查看 source code , 一个空画笔将其 display 设置为 none。如果您使用浏览器开发人员工具检查类为 .resize.s 的 g 元素，您可以看到这一点。

一个可能的修复方法是将其添加到 brushend 监听器中:

// 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")
    }); 

这是一个PLUNK使用此解决方案。

一旦您真正开始使用图表中的画笔，您可能就不必处理这个问题了。