d3缩放和刷子同时工作 [英] d3 zoom and brush working at the same time
问题描述
我想知道如何同时处理缩放和画笔行为。
想象一下，您有一个应用程序可以控制选择区域选项是否激活。如果激活，那么当用户开始视觉选择时，它将刷新一组SVG元素。如果停用，那么用户将移动一些SVG容器（pan）。
如何声明两个本机d3行为，而不相互覆盖， ？或者，它是唯一的解决方案，我必须去摧毁事件，宣布新的，反之亦然，当用户想要不同的行为？
或者，是有另一种不同的方式
我拥有的一段代码如下：
var zoomer，brush;
zoomer = self.get（'zoomer'）;
if（zoomer === undefined）{
self.set（{zoomer：d3.behavior.zoom（）。translate（[0,0]）。scale（1）} ）;
} else {
self.zoomCurrent（）;
}
brush = self.get（'brush'）;
if（brush === undefined）{
self.set（{brush：d3.svg.brush（）。x（d3.scale.identity（）。domain（[0，self.get （'config'）。width]））
.y（d3.scale.identity（）。domain（[0，self.get（'config'）。
}
svgObject = d3.select（self.get（'target'））。append（'svg'）
.attr（'xmlns' 'http://www.w3.org/2000/svg'）
.attr（'xlink'，'http://www.w3.org/1999/xlink'）
.attr 'id'，self.get（'targetNoChar'）+'SVG'）
.attr（'width'，self.get（'config'）。width）
.attr self.get（'config'）。height）
.attr（pointer-events，all）
.call（self.get（'zoomer'）。on function（d）{self.zoomFunction（d3.event，this，d）}））
.append（'g'）
.attr（'class'，'zoomer'）
.attr（pointer-events，all）
.append（'g'）
.attr（pointer-events，all）;
d3.select（'svg'）。append（'g'）
.attr（'class'，'brush'）
.attr（pointer-events ，all）
.datum（function（）{return {selected：false，previousSelected：false};}）
.call（self.get（'brush'）。on（'brushstart' ，function（d）{self.brushStart（d3.event，this，d）}）
.on（'brush'，function（d）{self.brush（d3.event，this，d）}）
.on（'brushend'，function（d）{self.brushEnd（d3.event，this，d）}））;
我如何处理d3.behaviour.zoom并且也可以不重写它们呢？
第一个解决方案：
最后，我的决定是在状态更改时重新声明事件定义，最后使用以下代码：
setAreaMode：function（）{
var self = this;
if（self.get（'selectAreaMode'）=== true）{
self.setCursorToCrosshair（）;
/ *停用缩放工具* /
self.get（'zoomer'）。on（'zoom'，null）;
/ *添加刷子到DOM * /
d3.select（'svg'）。append（'g'）
.attr（'class'，'brush'）
.attr（pointer-events，all）
.datum（function（）{return {selected：false，previouslySelected：false};}）;
/ *附加监听器到刷子* /
d3.select（'。brush'）。call（self.get（'brush'）。on（'brushstart'，function ）{self.brushStart（d3.event，this，d）}）
.on（'brush'，function（d）{self.brush（d3.event，this，d）}）
.on（'brushend'，function（d）{self.brushEnd（d3.event，this，d）}）
）;
} else if（self.get（'selectAreaMode'）=== false）{
self.setCursorToDefault（）;
/ *激活zoomer * /
self.get（'zoomer'）。on（'zoom'，function（d）{self.zoomFunction（d3.event，this，d）}）;
/ *停用监听器画笔工具* /
d3.select（'。brush'）。call（self.get（'brush'）。on（'brushstart'，null）
.on（'brush'，null）
.on（'brushend'，null））;
/ *从DOM中删除画笔* /
d3.select（'。brush'）。remove（）;
}
}
任何其他想法？
I would like to know how can I deal with Zoom and Brush behaviours at the same time.
Imagine you have an application that controls whether a "Select Area" option is activated or not. If activated, then when an user starts selecting visually it's expected to brush a set of SVG elements. If deactivated, then the user would be moving some SVG container (pan).
How can I declare both native d3 behaviours without overriding between each other and working properly using an state? Or, is it the only solution I have to go destroying events and declaring new ones and viceversa when the user wants a different behaviour?
Or, is there another different way of doing it?
A piece of code I have is the following one:
var zoomer, brush;
zoomer = self.get('zoomer');
if (zoomer === undefined){
self.set({zoomer: d3.behavior.zoom().translate([0,0]).scale(1)});
} else{
self.zoomCurrent();
}
brush = self.get('brush');
if (brush === undefined) {
self.set({brush: d3.svg.brush().x(d3.scale.identity().domain([0, self.get('config').width]))
.y(d3.scale.identity().domain([0, self.get('config').height]))});
}
svgObject = d3.select(self.get('target')).append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('xlink', 'http://www.w3.org/1999/xlink')
.attr('id', self.get('targetNoChar')+'SVG')
.attr('width',self.get('config').width)
.attr('height',self.get('config').height)
.attr("pointer-events", "all")
.call(self.get('zoomer').on("zoom", function (d) { self.zoomFunction(d3.event, this,d) }))
.append('g')
.attr('class', 'zoomer')
.attr("pointer-events", "all")
.append('g')
.attr("pointer-events", "all");
d3.select('svg').append('g')
.attr('class', 'brush')
.attr("pointer-events", "all")
.datum(function() { return { selected: false, previouslySelected: false};})
.call(self.get('brush').on('brushstart', function (d) { self.brushStart(d3.event, this,d) })
.on('brush', function (d) { self.brush(d3.event, this,d) })
.on('brushend', function (d) { self.brushEnd(d3.event, this,d) }));
How can I deal with d3.behaviour.zoom and also brush without they override each other?
Thanks a lot in advance.
FIRST SOLUTION FOUND:
Finally, my decision has been re-declaring events definition when the state changes, ending up with the following code:
setAreaMode: function () {
var self = this;
if (self.get('selectAreaMode')===true) {
self.setCursorToCrosshair();
/* Deactivating zoom tool */
self.get('zoomer').on('zoom', null);
/* Adding brush to DOM */
d3.select('svg').append('g')
.attr('class', 'brush')
.attr("pointer-events", "all")
.datum(function() { return { selected: false, previouslySelected: false};});
/* Attaching listeners to brush */
d3.select('.brush').call(self.get('brush').on('brushstart', function (d) { self.brushStart(d3.event, this,d) })
.on('brush', function (d) { self.brush(d3.event, this,d) })
.on('brushend', function (d) { self.brushEnd(d3.event, this,d) })
);
} else if (self.get('selectAreaMode')===false) {
self.setCursorToDefault();
/* Activating zoomer */
self.get('zoomer').on('zoom', function (d) { self.zoomFunction(d3.event, this,d) });
/* Deactivating listeners brush tool */
d3.select('.brush').call(self.get('brush').on('brushstart', null)
.on('brush', null)
.on('brushend', null));
/* Removing brush from DOM */
d3.select('.brush').remove();
}
}
Any other ideas?
这篇关于d3缩放和刷子同时工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
