小编Dav*_*ayo的帖子

d3缩放和笔刷同时工作

我想知道如何同时处理“缩放”和“画笔”行为。

假设您有一个控制“选择区域”选项是否被激活的应用程序。如果激活,则当用户开始视觉选择时,应刷一下一组SVG元素。如果停用,则用户将移动某些SVG容器(平移)。

如何声明两个本机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').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) { …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

5
推荐指数
1
解决办法
1288
查看次数

标签 统计

d3.js ×1

javascript ×1