解决

Question

我正在尝试使用javascript和D3js在网页上显示图表。

我已按照http://bost.ocks.org/mike/path/中的示例开始并扩展了那里显示的图表的功能。

但是，在尝试使用转换来平滑更新我的图表时，我遇到了一些问题。

以下是我的更新功能的代码以及一些额外的注释

updateChart= function(){  

            //generate a new point, integer [0 5]
    var newPoint=Math.floor(Math.random() * 5);

    data.push(newPoint);

    // redraw the line
    path
    .attr("d", line)
    .attr("transform", null);

    //update x domain for axis labels - 
    //the new domain is the same as before slided by 1 position
    xDomain=[(xDomain[0]+1),(xDomain[1]+1)];
    xScale.domain(xDomain);

    //slide xAxis       
    svg.select(".x.axis")
    .transition()
    .duration(500)
    .call(xAxis);     //xAxis is my scale function and works fine for labels and data display

    //slide the line to the left  
    path
    .transition()
    .duration(500)
    .ease("linear")
    .attr("transform", "translate(" + xScale(xDomain[0]) + ")");

    // pop the old data point off the front
    data.shift();

};

我的问题是，当轴标签正确地向左滑动一个位置并在.5秒内平稳地执行时，该线会立即“跳转”到更新的位置，并且不会像在教程中那样平滑过渡。

更新y轴范围时会发生类似情况。轴线平滑变化，而新线条立即跳转到新刻度。

更新：这里是jsfiddle的链接：[删除，声誉不够。它与版本6的更新2的jsfiddle相同]

更新2 请在此处找到jsfiddle中的工作代码，其中还包括y轴刻度的更改。另请注意y轴刻度的变化如何在显示的数据中产生1个位置的偏移。我也很感激有关此行为的任何意见。谢谢！ [删除，声誉不够。它与版本8的更新2的jsfiddle相同]

解决

经过几个小时的尝试和阅读其他例子，我已经能够解决问题了

关于沿x轴的过渡，问题出现在转换参数中，我应该提供xScale（xDomain [0] -1）而不是之前的xScale（xDomain [0]）
< / LI>
关于不同尺度之间的转换问题是在我更新yScale之前应该首先重新划线。通过移动线
```
path
.attr("d",line)
.attr("transform", null);
```

上面

    yScale.domain(yDomain);

过渡顺利进行。

希望这会为其他人节省一些时间。在这里您可以找到工作代码 http://jsfiddle.net/4Z2FY/10/

正如ChrisJamesC所说，这是更新y轴范围的相关代码

updateRange= function(newDomain){
//update domain
    yDomain=newDomain;

//redraw line BEFORE changing the yScale function 
    path
    .attr("d",line)
    .attr("transform", null);

    //change scale
    yScale.domain(yDomain); 

    //switch to new scale
    svg.select(".y.axis")
    .transition()
    .duration(750)
    .call(yAxis);

    // update the line
    path
    .transition()
    .duration(750)
    .attr("d", line)
    .attr("transform", null);    
}

D3js在线转换不起作用

解决

0 个答案: