在带有D3.js的线图中激活线 [英] Animate lines in a line graph with D3.js
本文介绍了在带有D3.js的线图中激活线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有我的线图,有2条线。
绘制我的线图的数据是从.csv文件中提取的。
任何人都可以解释如何从一个空图开始,
提前感谢!
$
b $ b var button = d3.select(#button); var margin = {top:30,right: 20,bottom:50,left:60},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format(%d-%b-%y)。parse;
//处理作为时间/日期传递给它的值
// OUTPUT RANGE
var x = d3.time.scale()
.range([0,width]);
// OUTPUT RANGE
var y = d3.scale.linear()
.range([height,0]);
var xAxis = d3.svg.axis()。scale(x)
.orient(bottom)
.ticks(5);
var yAxis = d3.svg.axis()。scale(y)
.orient(left)
.ticks(5);
//为每个数据分配坐标
var valueline = d3.svg.line()
.interpolate(linear)
.x (d){return x(d.date);})
.y(function(d){return y(d.close);});
//第二行数据
var valueline2 = d3.svg.line()
.x(function(d){return x(d.date);})
.y(function(d){return y(d.open);});
//为行下面的'area'创建区域
var area = d3.svg.area()
.x(function(d){return x(d.date );})
.y0(height)
.y1(function(d){return y(d.close);});
//创建绘制图形的区域
var svg = d3.select(body)
.append(svg)
.attr ,width + margin.left + margin.right)
.attr(height,height + margin.top + margin.bottom)
//分组内容
.append )
.attr(transform,translate(+ margin.left +,+ margin.top +));
function make_x_axis(){
return d3.svg.axis()
.scale(x)
.orient(bottom)
。 tick(5)
}
function make_y_axis(){
return d3.svg.axis()
.scale(y)
.orient left)
.ticks(30)
}
// csv回调函数
d3.csv(myData2.csv,function
data.forEach(function(d){
d.date = parseDate(d.date);
// + operator将任何'close'值设置为nuneric
d。 close = + d.close;
d.open = + d.open;
} );
// INPUT DOMAINS
// extend()返回参数的最小值和最大值
x.domain(d3.extent(data,function(d){return d.date;}));
//返回任何一组数据的最大值
y.domain([0 ,d3.max(data,function(d){return Math.max(d.close,d.open);})]);
//绘制行
// valueline数组到路径对象
svg.append(path)//添加valueline路径。
.attr(class,line)
//添加虚线
.style(stroke-dasharray,(5,9))//< = =这行在这里!
.attr(d,valueline(data));
button.on(click,function(){
svg.append(path)//添加valueline2路径
.attr class,line2)
.transition()
.attr(d,valueline2(data));
})
$ b b svg.append(g)//添加X轴
.attr(class,x axis)
//将x轴移动到图形底部
.attr (transform,translate(0,+ height +))
.call(xAxis);
// x轴的文本标签
svg.append(text)// x轴的文本标签
.attr(transform,translate +(width / 2)+,+(height + margin.bottom - 5)+))
.style(text-anchor,middle)
.text 日期);
svg.append(g)//添加Y轴
.attr(class,y axis)
.call(yAxis);
// y轴的文本标签
svg.append(text)
.attr(transform,rotate(-90))
.attr(y,0 - margin.left)
.attr(x,0 - (height / 2))
//将额外的左边填充添加为原始y pos = 0
.attr(dy,1em)
.style(text-anchor,middle)
.text(Value);
//为图形添加标题
svg.append(text)
.attr(x,(width / 2))
.attr(y,0 - (margin.top / 2))
.attr(text-anchor,middle)
.style(font-size, 16px)
.style(text-decoration,underline)
.text(Me Graph Larry);
//绘制x轴网格
svg.append(g)
.attr(class,grid)
。 attr(transform,translate(0,+ height +))
.call(make_x_axis()
.tickSize(-height,0,0)
.tickFormat )
)
//绘制y轴网格
svg.append(g)
.attr(class,grid)
.call(make_y_axis()
.tickSize(-width,0,0)
.tickFormat()
)
}); ;! - d3.csv close - >
解决方案>
您需要为动画设置合理的开始值:
var startvalueline2 = d3.svg.line
.x(function(d){return x(d.date);})
.y(function(d){return y(0);})
button.on(click,function(){
svg.append(path)//添加valueline2路径
.attr(class,line2)
.attr(d,startvalueline2(data)); //设置起始位置
.transition()
.attr(d,valueline2(data)); $ b});
您也可以看看Mike的路径转换页面。要了解如何使用 svg:path
时如何实现平滑(非摆动)动画。
I have my line graph, with 2 lines. Data to draw my line graph is pulled from a .csv file.
Can anyone explain how I could start off with an empty graph, and when I click a button, my lines animate across the graph?
Thanks in advance!!
var button=d3.select("#button");
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
//treats value passed to it as a time/date
//OUTPUT RANGE
var x = d3.time.scale()
.range([0, width]);
//OUTPUT RANGE
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.ticks(5);
//assigns coordinates for each piece of data
var valueline = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
//second line data
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open); });
//create area for 'area' below line
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
//creates area to draw graph
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
//groups content
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(30)
}
// csv callback function
d3.csv("myData2.csv", function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
//+ operator sets any 'close' values to nuneric
d.close = +d.close;
d.open = +d.open;
});
//INPUT DOMAINS
//.extent() returns min and max values of argument
x.domain(d3.extent(data, function(d) { return d.date; }));
//returns max of whichever set of data is bigger
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]);
//draws lines
//passes the valueline array to path object
svg.append("path") // Add the valueline path.
.attr("class", "line")
//adds dashed line
.style("stroke-dasharray", ("5, 9")) // <== This line here!!
.attr("d", valueline(data));
button.on("click", function() {
svg.append("path") // Add the valueline2 path.
.attr("class", "line2")
.transition()
.attr("d", valueline2(data));
})
svg.append("g") // Add the X Axis
.attr("class", "x axis")
//moves x axis to bottom of graph
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//text label for x-axis
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom - 5 ) + ")")
.style("text-anchor", "middle")
.text("Date");
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
//text label for y-axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
//adds extra left padding as original y pos = 0
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
//adding a title to the graph
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Me Graph Larry");
//draw x axis grid
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
//draw y axis grid
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
});<!--d3.csv close-->
解决方案
You need to setup a reasonable start value for the animation:
var startvalueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(0); })
button.on("click", function() {
svg.append("path") // Add the valueline2 path.
.attr("class", "line2")
.attr("d", startvalueline2(data)); // set starting position
.transition()
.attr("d", valueline2(data)); // set end position
});
You might also have a look at Mike's path transitions page. To see how to implement smooth (non-wobbly) animations when using svg:path
.
这篇关于在带有D3.js的线图中激活线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文