您的位置：首页 > Web前端 > JavaScript

D3.js学习（七）

2013-10-21 11:37 204 查看
上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition）

首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。

添加一个按钮

<divid="option">

[code]<inputname="updateButton"
type="button"

value="Update"

onclick="updateData()"

/>

</div>

[/code]

添加一个动画函数

functionupdateData(){

[code]//再次获取数据
d3.tsv("../data/data-alt.tsv",function(error,data){

data.forEach(function(d){

d.date=parseDate(d.date);

d.close=+d.close;

});


//设置数据的规模

x.domain(d3.extent(data,function(d){returnd.date}));

y.domain([0,d3.max(data,function(d){returnd.close})]);


//选择我们想要应用变化的部分

varsvg=d3.select("body").transition();


//变化

svg.select(".line")

.duration(750)

.attr("d",valueline(data));

svg.select(".x.axis")

.duration(750)

.call(xAxis);

svg.select(".y.axis")

.duration(750)

.call(yAxis);

});

}

[/code]

在上面的代码中，我们首先要获取一个组先的数据，所以，我们从新的数据文件（data-alt.tsv）中读取新的数据。然后，仿造前面绘制图表的方法来进行绘制，不同的是，这里加入一个新的方法-transition()。

transiton(int):使图表从一个状态过渡到另一个状态。括号里面可以是一个整数，表示动画执行的时长，当然也可以是一个ease(type[,arguments…])方法，来表示丰富的运动。

目前的代码为：

<!DOCTYPEhtml>
<metacharset="utf-8">
<style>/*settheCSS*/

body{font:12pxArial;}

path{
stroke:steelblue;
stroke-width:2;
fill:none;
}

.axispath,
.axisline{
fill:none;
stroke:grey;
stroke-width:1;
shape-rendering:crispEdges;
}

</style>
<body>

<divid="option">
<inputname="updateButton"
type="button"
value="Update"
onclick="updateData()"/>
</div>

<!--loadthed3.jslibrary-->
<scripttype="text/javascript"src="d3/d3.v3.js"></script>

<script>

//Setthedimensionsofthecanvas/graph
varmargin={top:30,right:20,bottom:30,left:50},
width=600-margin.left-margin.right,
height=270-margin.top-margin.bottom;

//Parsethedate/time
varparseDate=d3.time.format("%d-%b-%y").parse;

//Settheranges
varx=d3.time.scale().range([0,width]);
vary=d3.scale.linear().range([height,0]);

//Definetheaxes
varxAxis=d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

varyAxis=d3.svg.axis().scale(y)
.orient("left").ticks(5);

//Definetheline
varvalueline=d3.svg.line()
.x(function(d){returnx(d.date);})
.y(function(d){returny(d.close);});

//Addsthesvgcanvas
varsvg=d3.select("body")
.append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

//Gettheinitialdata
d3.tsv("data/data.tsv",function(error,data){
data.forEach(function(d){
d.date=parseDate(d.date);
d.close=+d.close;
});

//Scaletherangeofthedata
x.domain(d3.extent(data,function(d){returnd.date;}));
y.domain([0,d3.max(data,function(d){returnd.close;})]);

//Addthevaluelinepath.
svg.append("path")
.attr("class","line")
.attr("d",valueline(data));

//AddtheXAxis
svg.append("g")
.attr("class","xaxis")
.attr("transform","translate(0,"+height+")")
.call(xAxis);

//AddtheYAxis
svg.append("g")
.attr("class","yaxis")
.call(yAxis);

});

//**Updatedatasection(Calledfromtheonclick)
functionupdateData(){

//Getthedataagain
d3.tsv("data/data-alt.tsv",function(error,data){
data.forEach(function(d){
d.date=parseDate(d.date);
d.close=+d.close;
});

//Scaletherangeofthedataagain
x.domain(d3.extent(data,function(d){returnd.date;}));
y.domain([0,d3.max(data,function(d){returnd.close;})]);

//Selectthesectionwewanttoapplyourchangesto
varsvg=d3.select("body").transition();

//Makethechanges
svg.select(".line")//changetheline
.duration(750)
.attr("d",valueline(data));
svg.select(".x.axis")//changethexaxis
.duration(750)
.call(xAxis);
svg.select(".y.axis")//changetheyaxis
.duration(750)
.call(yAxis);

});
}

</script>
</body>


ViewCode

下节我们将把图表中的曲线图变成散点图，以及添加提示框（Tooltips）效果。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航