Question

我使用d3js并希望使用缩放和平移来制作实时线图。一开始＆＃34;自动刷新模式＆＃34;已启用，但如果用户单击任何鼠标按钮，那么＆＃34;用户模式＆＃34;激活，用户可以在其中仅缩放和平移X轴。双击打开＆＃34;自动刷新模式＆＃34;。

问题如下：我沿X轴平移图形（按下LMB并移动鼠标）。图形向右移动（蓝线本身，请参见下面的链接），但X轴始终从初始状态而不是当前状态移动（我提醒您图形是实时的），即无论是否，当我们移动所有图形时，X轴始终从相同的状态移动（在此上下文中，状态是最小值和最大值之间的间隔）。

backRect = svg.append('rect')
        .style('stroke', 'none')
        .style('fill', '#FFF')
        .style('fill-opacity', 0)
        .attr({
            x: margins.left,
            y: margins.top,
            width: width - margins.right - margins.left,
            height: height - margins.top - margins.bottom,
            'pointer-events': 'all'
        });

axis_x = svg
        .append('g')
        .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px'})        
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + (height-margins.bottom) + ')')
        .call(xAxis);

zoom = d3.behavior.zoom()
        .scaleExtent([0.15, 12])
        .x(x)
        .on('zoom', function zoomHandler() {
            axis_x.call(xAxis);
            paths.attr('transform', 'translate(' + d3.event.translate[0] + ', ' + margins.top + ') '
                + 'scale(' + d3.event.scale + ',1)');
        });

backRect.call(zoom).on("dblclick.zoom", null);

所有项目都会看到jsfiddle enter link description here

查看问题的说明：

打开链接
等待5-10秒
尝试拖动图形，之后X轴的位置敲击

非常感谢你提前!!!

d3js带缩放和平移的实时线图

0 个答案: