【问题标题】:D3 get axis values on zoom eventD3 在缩放事件中获取轴值
【发布时间】:2015-10-05 11:45:30
【问题描述】:

我有一个来自d3 zoomable area 的简单可缩放图表

它有日期 x 轴,当用户缩放时,我想获取图表 x 轴边界值。
例如,我像这样缩放,

我想获得 x 轴值,2015 年 5 月 23 日和 2015 年 5 月 31 日以满足我的内部需求,可以吗?试过了,但没有成功

function draw(){
            var e = d3.event;
            if(e){
                var tx = Math.min(0, Math.max(e.translate[0], width - width*e.scale));
                var ty = Math.min(0, Math.max(e.translate[1], height - height*e.scale));
                console.log(x.invert(e.translate[0]), x.invert(tx));
                zoom.translate([tx, ty]);
                g.attr('transform', [
                    'translate(' + [tx, ty] + ')',
                    'scale(' + e.scale + ')'
                ].join(' '));
                svg.call(zoom);
            }
            svg.select('g.x.axis').call(xAxis);
            svg.select('g.y.axis').call(yAxis);
            svg.select('path.area').attr('d', area);
            svg.select('path.line').attr('d', line_low);
            svg.select('path.line').attr('fill', 'blue').attr('stroke-width', 4).attr('d', minTempLimitLine);
            svg.select('path.line').attr('fill', 'red').attr('stroke-width', 4).attr('d', maxTempLimitLine);
        }

但x.invert(e.translate[0]) 不断返回Sat Oct 04 2014 12:56:40 GMT+0600 (ALMT),这是我数据中的第一个日期(按日期过滤),而且我认为它与e.translate 无关,因为它只有2 个值,分别代表x、y。 有什么想法吗?

【问题讨论】:

  • 你能发布一个工作的sn-p吗?例如,我们需要看看你是如何注册监听器的......

标签: javascript d3.js


【解决方案1】:

如果您按照示例进行操作 (http://bl.ocks.org/mbostock/4015254):

然后在draw()函数中

x.domain()

将为您提供当前状态的 x 轴的最大/最小数组。

【讨论】:

    【解决方案2】:

    您可以从 xAxis 缩放函数中获取此信息。

    xScale.domain()[0];
    xScale.domain()[1];
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-09-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-07
      相关资源
      最近更新 更多