Javascript 在d3js中,是否可以在x轴上转换固定范围的值?
我希望创建一个带有过渡的折线图。因此,对于第一步,我希望简单地绘制轴并移动x轴。x轴的值为0-15,我希望这些值在循环中继续移动。。我通过stackoverflow获得了以下代码的帮助: 以下是我的代码:Javascript 在d3js中,是否可以在x轴上转换固定范围的值?,javascript,svg,d3.js,Javascript,Svg,D3.js,我希望创建一个带有过渡的折线图。因此,对于第一步,我希望简单地绘制轴并移动x轴。x轴的值为0-15,我希望这些值在循环中继续移动。。我通过stackoverflow获得了以下代码的帮助: 以下是我的代码: var t = 1, maxval; var i, n = 40; var duration = 750; function refilter(){ var margin = {top: 10, right: 10, bottom: 20, left: 40}, width = 96
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轴上的值确实会移动,但不会以重复的方式移动,而是简单地将frm 1拉伸到15。有人能帮我吗?您的勾号功能正在将域设置为:
[1,15]
then
[2,15]
then
[3,15]
etc...
这更像是向终点的缩放。您需要的是滚动效果,例如N为5个刻度:
[1,5]
then
[2,6]
then
[3,7]
etc...
因此:
例如
编辑以供评论
Datetimes可以用同样的方法处理,但计算方法不同。例如,滚动我的月份:
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);
}
更新。非常感谢……我知道了……你很好地解释了这个概念。。。。还有一个快速问题,如果x轴上的值不是数字,可能是月、时间等。。。。那么凝乳部分就不起作用了……那该怎么办呢?@Sush,同样的前提,但现在在datetime上进行计算。请参阅更新的答案。再次感谢您。。。我将试着用你给我的例子计算出我的数据:
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);
}