Question

由于某些原因，我无法将注意力集中在画笔的概念和访问这些画笔上。例如我 1）创建画笔容器 2）调用容器内的刷子 3）过一段时间后，我需要移动画笔。

我现在如何使用此画笔？到目前为止，我在示例中看到的是对画笔进行了重新制作以使其移动。下面是我想做的。

首先从创建此数据的容器开始

var data = [1,2,3,4,5]

现在使用d3数据绑定创建画笔容器，然后为每个容器调用画笔

//CREATE BRUSH CONTAINER
d3.select('body').append('g').attr('id', 'brushContainer')

//BIND DATA
var brushContainer = d3.select('#brushContainer')
    .selectAll('g')
    .data(data)

//ENTER
var brushContainerEnter = brushContainer
    .enter()
    .append('g')

//SET EXTENT AND ON
brushContainer = brushContainerEnter.merge(brushContainer)
    .attr('transform', `translate(${this.margin.left},0)`)
    .attr('class','brush')
    .each( function(d,i){
        d3.brushX()
            .extent([[0,(i*135)+38], [that.width,(i*135)+170]])
            .on('end start brush',that.updateBubbles)(d3.select(this))
    })

//FUNCTION FOR ON
function updateBubbles(brush){
    console.log(brsh
}

但是现在我想稍后访问画笔并移动它们，而且还要保持功能updateBubbles的活动，因此在移动每个画笔之后，我希望移动会触发updateBubbles功能。下面是这个过程的不幸尝试。

//CREAT NEW DATA FOR MOVE
var newData = [6,7,8,9, 10]

//BIND, ENTER, and MOVE
var brushes = d3.select('#brushContainer')
     .select('g')
     .data(newData)
     .enter()
     .append('g')
     .each(function(d){
         //Grab the Brush so we can change it
         var orBrush = d3.select(this).__groups[0][0].__brush
         //Move this brush
         orBrush.move(d3.select(this).__groups[0],[d,d+5])
     })

任何方向都非常适用。

移动先前创建的画笔

0 个答案: