d3.js学习6
浏览数：47 /
时间：2015年06月09日
加载server数据d3.json(url,callback)
首先准备一些json数据，将上一篇的js数据转化为json格式并存储
var data=[
{expense:10,category:"Retail"},
{expense:15,category:"Gas"},
{expense:30,category:"Retail"},
{expense:50,category:"Dining"},
{expense:80,category:"Gas"},
{expense:65,category:"Retail"},
{expense:55,category:"Gas"},
{expense:30,category:"Dining"},
{expense:20,category:"Retail"},
{expense:10,category:"Dining"},
{expense:8,category:"Gas"}
];
var jsonData=JSON.stringify(data);
document.write(jsonData);
输出结果后存储为data.json
var data=[];
function render(data,comparator){
var selection=d3.select("body")
.selectAll("div.h-bar")
.data(data);
//enter
selection.enter()
.append("div")
.attr("class","h-bar")
.append("span");
//remove
selection.exit().remove();
//update
selection.attr("class","h-bar")
.style("width",function(d){
return (d.expense*5)+"px";
})
.select("span")
.text(function(d){
return d.category;
});
}
//d3.json(‘url‘,callback)
function load(){
d3.json("data.json",function(error,json){
data=data.concat(json);
render(data);
})
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
