Question

我正在尝试使用带有画笔的d3 v3创建一个时间范围选择器，并缩放同一对象。

这个小提琴[1]显示了我当前的状态：

const margin = {top: 0, right: 40, bottom: 50, left: 40},
        width = 800 - margin.left - margin.right,
        height = 100 - margin.top - margin.bottom

const svg = d3.select('body')
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

const scale = d3.time.scale()
    .domain([new Date(2013, 7, 1), new Date(2013, 7, 15)])
    .range([0, width])

const xAxis = d3.svg.axis().scale(scale).orient('bottom').tickSize(height)

const zoom = d3.behavior.zoom().on('zoom', onZoom).x(scale)

svg.append('g')
    .attr('class', 'axis--grid')
    .call(xAxis)
    .call(zoom)
    .selectAll('text')
        .style('font-size', '10px')

const brush = d3.svg.brush()
                .x(xAxis.scale())
                .extent([new Date(2013, 7, 5), new Date(2013, 7, 13)])
                .on("brush", onBrush)


const brushg = svg.append("g")
                    .attr("class", "brush")
                    .call(brush)
                    .call(zoom)

d3.selectAll('.brush>.background').remove()

brushg.selectAll("rect")
        .attr("height", height)



function onBrush () {
    console.log(d3.event)
}

function onZoom () {
    console.log(d3.event)
    if (d3.event.sourceEvent.type === 'wheel') {
        svg.select('g').call(xAxis)
        brush.extent([new Date(2013, 7, 1), new Date(2013, 7, 15)])
        brush(d3.select('.brush').transition())
        brush.event(d3.select('brush').transition())

    }
}

移动画笔后滚动/缩放时遇到奇怪的行为。除了简单地缩放轴，轴还可以“调整”到画笔的位置。在移动后滚动时，轴刻度将自身设置为8月1日在画笔的开始处，而不是简单地放大或缩小，而与画笔的位置无关。

无论在哪个元素上触发缩放（画笔/父组），它都会显示此行为。我将缩放称为两个元素，以便它可以在背景和画笔上使用。笔刷背景已删除，因此无法创建新的笔刷。

我们非常感谢您的帮助！

[1] https://jsfiddle.net/steinroe/dgf8hwb6/1/

d3 v3组合画笔和放大一个图：怪异的Behauvior放大

0 个答案: