[英]D3 updating brush's scale doesn't update brush
What I want to create is a zoomable, brushable timeline in D3 version 3.5.6. 我想要创建的是D3版本3.5.6中的可缩放,可刷新的时间轴。 For now I'm not using D3's zoom behavior but just two zoom buttons.
目前我没有使用D3的缩放行为,只有两个缩放按钮。 My problem is the following: When a button is clicked, I update the scale and redraw the axis as well as the brush.
我的问题如下:当单击一个按钮时,我更新比例并重新绘制轴和画笔。 For some reason the brush doesn't update the extent rectangle and the handles but just the background.
由于某种原因,画笔不会更新范围矩形和手柄,而只更新背景。 I know that I'm not actually updating the
.extent()
of the brush. 我知道我实际上并没有更新画笔的
.extent()
。 But isn't the brush supposed to update when the scale was changed? 但是,当规模改变时,刷子是否应该更新?
Here's the relevant portion of the code. 这是代码的相关部分。 The rest can be found in this fiddle .
其余的可以在这个小提琴中找到。
document.getElementById('in').addEventListener('click', zoom.bind(null, .1));
document.getElementById('out').addEventListener('click', zoom.bind(null, -.1));
function zoom(step) {
var offset;
zoomScale += step;
if(zoomScale < 1)
zoomScale -= step;
offset = (zoomScale * width - width) / 2;
// updating the scale
xScale
.range([-offset, width + offset]);
// redrawing the brush which doesn't seem to have effect I expected
brushGroup
.call(brush);
// redrawing the axis which works fine
xAxisGroup
.transition()
.call(xAxis);
}
Thanks a lot! 非常感谢!
Apparently you need to reset the brush's extent, so the internal xExtent
and yExtent
variables are reset. 显然,您需要重置画笔的范围,因此重置内部
xExtent
和yExtent
变量。 Seems like a bug to me. 对我来说似乎是一个错误。
brush.extent(brush.extent());
https://jsfiddle.net/azksfjjw/6/ https://jsfiddle.net/azksfjjw/6/
I caught the problem in your zoom function you re define xScale range as 我在缩放功能中发现了您将xScale范围定义为的问题
xScale
.range([-offset, width + offset]);
After this you need to pass it here 在此之后你需要在这里传递它
brush = d3.svg.brush()
.x(xScale) // This need new Values
.extent([.1, .6]),
Than after you can call to re draw your time line 比之后你可以打电话来重新画出时间线
brushGroup
.call(brush);
here the fiddle https://jsfiddle.net/azksfjjw/4/ 这里的小提琴https://jsfiddle.net/azksfjjw/4/
I had the same problem, and fixed it by deleting the brush group and calling it again. 我有同样的问题,并通过删除画笔组并再次调用它来修复它。
Before graph resizing: 图表调整大小之前:
var brush = d3.brushX().extent([[0, 0], [graph_dim.w, graph_dim.h]]).on("end", brushended);
graphContent.append("g").attr("class", "brush").call(brush);
After graph resizing: 图表调整大小后:
// update graph height
graph_dim.h = my_new_graph_height;
// update brush extent
brush.extent([[0, 0], [graph_dim.w, graph_dim.h]]);
graphDIV.select(".brush").remove();
graphContent.append("g").attr("class", "brush").call(brush);
Probably not the best way, but it works :-) 可能不是最好的方式,但它的工作原理:-)
NOTE that if you have mouse events on the same graph, they will no longer be accessible (the brush will "cover" them) -- see this answer . 请注意,如果您在同一图表上有鼠标事件,它们将无法再访问(画笔将“覆盖”它们) - 请参阅此答案 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.