在 d3js 中，是否可以在 x 轴上转换固定范围的值？

Question

我想创建一个带过渡的折线图。所以对于第一步，我希望简单地绘制轴并移动 x 轴。 x 轴的值是 0-15，我希望这些值继续循环移动。我从通过 Whosebug 获得的这段代码中获得了帮助：http://jsfiddle.net/aggz2qbn/

这是我的代码：

var t = 1, maxval;
var i, n = 40;
var duration = 750;
function refilter(){

var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([1, 15])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, maxval])
    .range([height, 0]);

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

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// extra svg to clip the graph and x axis as they transition in and out
var graph = g.append("svg")
    .attr("width", width)
    .attr("height", height + margin.top + margin.bottom);   

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var axis = graph.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(x.axis=xAxis);

g.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

tick();

function tick() {
    t++;
    if(t>=15)
        t=1;
    else if(t<=15)
    {   
        x.domain([t,15]);
        axis.transition()
        .duration(500)
        .ease("linear")
        .call(xAxis)
        .each("end", tick);
    }
     // slide the x-axis left

}
}

x 轴上的值确实在移动，但不是以重复的方式移动，而是简单地从 1 拉伸到 15。有人可以帮我吗？

Answer 1

您的刻度函数将域设置为：

[1,15]
then
[2,15]
then
[3,15]
etc...

这更像是对结尾的放大。你想要的是滚动效果（比如 N 为 5 个刻度）：

[1,5]
then
[2,6]
then
[3,7]
etc...

所以：

function tick() {
  var curD = x.domain(); // get current domain   
  if (curD[1] >= 15){ // at 15 reset to 1,5
     curD[0] = 0;
     curD[1] = n-1;
   }
  x.domain([curD[0]+1,curD[1]+1]); // increase both sides by one

  // slide the x-axis left
  axis.transition()
    .duration(1500)
    .ease("linear")
    .call(xAxis)
    .each("end", tick);
}

例子here.

评论编辑

日期时间的处理方式相同，但计算方式不同。例如，滚动我的月份：

function tick() {
  var curD = x.domain();
  var newD = [curD[0].setMonth(curD[0].getMonth() + 1),
            curD[1].setMonth(curD[1].getMonth() + 1)]
  x.domain(newD);
  // slide the x-axis left
  axis.transition()
    .duration(1500)
    .ease("linear")
    .call(xAxis)
    .each("end", tick);
}

已更新 example。

在 d3js 中，是否可以在 x 轴上转换固定范围的值？

In d3js, is it possible to transition a fixed range of values on x-axis?

javascript

svg

d3.js