Question

我是d3.js的新手。我在线图上的数据点分布不均匀，当我在右侧添加新点时，我想删除左侧的最后一个数据点，如mike's path transition tutorial所示。我指的是轴的最后过渡。

因此，在进行转换时，我想计算最后两个数据点之间的距离，因为它们位于不均匀的距离上。我将作为有效过渡应用的最后两点之间的总差异。

示例线图。 xAxes范围：时间 graph http://i60.tinypic.com/2dq5xv.png

这里第1和第2点的距离远远超过其他点。因此，在删除第一个元素时，我需要更多地传输它。对于第二点起，我需要经过很短的距离。

感谢任何帮助。

修改

    var checkList=getCheckedList();     //getting list of parameters:here read1,read2,read3
    updateAxes(checkList,data);
    var t = svg.transition().duration(750);
    t.select(".x.axis").call(xAxis);
    t.select(".y.axis").call(yAxis);
    var keys=KeyArray;
    var line1;
    for(var i=0;i<keys.length;i++)
    {
        if(actualKeys.indexOf(keys[i]) > -1){

            line1=d3.svg.line()
            .interpolate("linear")
            .x(function(d) { return x(d.time); })
            .y(function(d) { return y(d[keys[i]]); });

            var id="#"+keys[i]+"_line";
            d3.select(id).attr("d",line1(data));  //I want trasition here
        }
    }

添加了JSFiddle code。它在我的本地机器上工作正常，但jsfiddle有一些问题。单击按钮时，它应该从右向左传输，因为它会使用新的5个数据点更改前5个数据点。

如果有任何不可理解的地方，请通知。

Answer 1

如果x轴是时间，我认为预期的UX是基于当前时间或新点平滑地滚动图形。删除第一个点是次要问题。在不了解您的目标的情况下，我怀疑UX翻译应该基于被删除的第一点。

翻译是：

var translateX = scale(lastDomainMax) - scale( newDomainMax)

您必须剪切图表，以便新点滚动到屏幕上。图表的左侧也被剪裁。第一个点将平移，但第1点和第2点之间的线段应保持不变，直到第2点滚出图表。从那以后，你应该始终在图表左侧保留一个点。

或者，您可以更改x域以反映阵列中当前点的最小值/最大值。在这种情况下，当您移除第1点时，第2点到第7点将水平展开以填充图表。

您可以在chartLine.update( 'trend')方法中查看d3-traits对line chart的处理方式。 d3-traits称你正在做的事情＆＃34;趋势＆＃34;。

d3js - 计算线图中两个数据点之间的距离

1 个答案: