我有 2 个问题想用我当前基于 this 的 d3 应用程序修复:
这是 fiddle :http://jsfiddle.net/zoa5m20z/
我想初始化我的笔刷,以便在应用程序启动时默认只刷一小部分特定部分。我用
.extent
尝试了以下操作,但没有成功。//date parsing function var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; //setting up brush and defaultExtent var brush = d3.svg.brush() .x(x2) .extent([parseDate("2014-08-11 10:20:00"), parseDate("2014-08-11 18:20:00")]) //trying to intialize brush .on("brush", brushed);
我想阻止我绘制的圆圈与 yaxis 重叠。我只想在画笔移动时在 y 轴右侧绘制/显示圆圈。就像规范的 Bostock Focus+Context via Brushing Block .我尝试调整边距和尺度、域、范围,但都无济于事。
我要避免的事情:
我是 d3.js
的新手,所以欢迎并感谢所有提示和建议!
最佳答案
对于你的第一个问题,你需要调用 brush.event
让画笔拾取新的范围。
brush = d3.svg.brush()
.x(x)
.extent([config.start, d3.time.day.offset(config.start, config.range)])
.on("brush", brushmove)
.on("brushend", brushend);
gBrush = svg.select('.brush')
.call(brush);
gBrush.call(brush.event);
对于你的第二个问题,我通常只是过滤掉笔刷范围之外的数据,这样我就只绘制可见数据。这是一个将在您的画笔移动/缩放事件中调用的示例:
// update the data so that only visible points are shown
var points= svg.selectAll('.point')
.data(function(d) { return onScreen(d, brush.extent); },
function(d) { return d.id; });
// draw the points that are now onscreen
var pointsEnter = points.enter().append('g').attr('class', 'point');
// remove any points that are now offscreen
points.exit().remove();
// up date the x/y position of your points based on the new axis.
// ... left up to you
为点设置一个唯一的 id 是很有帮助的,这样它们就可以随着画笔的移动而被转换到它们的新位置,而不必销毁它们并重新绘制它们。
我在 http://bl.ocks.org/bunkat/1962173 有一个使用这些技术的示例.
关于javascript d3.js : initialize brush with brush. extent 并阻止数据溢出 margin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25656352/