<script type="text/javascript">
dataset=[];
for (i=0;i<50;i++){
x=Math.round(Math.random()*1000);
y=Math.round(Math.random()*1000);
dataset.push([x,y]);
}
var formator=d3.format(".1%") //刻度樣式自定義,也可以通過formator(10)測試。
/*
var dataset=[[ 5, 20 ],
}
[ 480, 90 ],
[ 250, 50 ],
[ 100, 33 ],
[ 330, 95 ],
[ 410, 12 ],
[ 475, 44 ],
[ 25, 67 ],
[ 85, 21 ],
[ 220, 88 ]];*/
var h=350;
var w=800;
var svg=d3.select("body").append("svg");
svg.attr("height",h)
.attr("width",w);
/*設置比例尺*/
padding=35;
var xscale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[0];
})])
.range([0+padding,w-padding]);
var yscale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([h-padding,0+padding]);//改變下y座標的延伸方向
var rscale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([2,5]);//將半徑映射到2-5,y越大,r越大,但視覺上不合理
/*座標軸聲生成*/
var xaxis=d3.axisBottom()
.scale(xscale)
.ticks(10)
// .tickFormat(formator);
var yaxis=d3.axisLeft()
.scale(yscale)
.ticks(10);
/*g是group的意思,跟html中div作用一樣*/
svg.append("g")
.attr("class","xaxis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xaxis);
svg.append("g")
.attr("class","yaxis")
.attr("transform","translate("+(padding)+",0)")
.call(yaxis);
/*定義蒙版*/
svg.append("clipPath")
.attr("id","chartarea")
.append("rect")
.attr("x",padding)
.attr("y",0)
.attr("width",w-padding)
.attr("height",h-padding);
svg.append("g") //將所有的circle添加到g元素中,並設置id以後方便引用
.attr("id","circles")
.attr("clip-path","url(#chartarea)")//引用蒙版
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d){
return xscale(d[0]);
})
.attr("cy",function(d){
return yscale(d[1]);
})
.attr("r",function(d){
return rscale(d[1]);
})
.attr("fill","red");
/*沒有比例尺生成的散點圖*/
/*svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d){
return d[0];
})
.attr("cy",function(d){
return d[1];
})
.attr("r",function(){
return "5px";
})
*/
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x",function(d){
return xscale(d[0]);
})
.attr("y",function(d){
return yscale(d[1]);
})
.attr("font-size","15px")
.attr("fill","pink")
d3.select("button")
.on("click",function(){
dataset=[];
var maxvalue=Math.round(Math.random()*1000);
for (i=0;i<50;i++){
x=Math.round(Math.random()*maxvalue);
y=Math.round(Math.random()*maxvalue);
dataset.push([x,y]);
};
// var xscale=d3.scale.linear()
xscale.domain([0,d3.max(dataset,function(d){
return d[0];
})])
.range([0+padding,w-padding]);
// var yscale=d3.scale.linear()
yscale.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([h-padding,0+padding]);//改變下y座標的延伸方向
// var rscale=d3.scale.linear()
rscale.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([2,5]);//將半徑映射到2-5,y越大,r越大,但視覺上不合理
/*選中g元素*/
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.on("start",function(){
d3.select(this)
// .transition()
// .duration(200) //在on方法中不能再有新的過度效果,只能執行立即變換的,否則會覆蓋掉前邊的
.attr("fill","magenta")
.attr("r",3)
})
.attr("cx",function(d){
return xscale(d[0]);
})
.attr("cy",function(d){
return yscale(d[1]);
})
// .attr("r",function(d){
// return rscale(d[1]);
// })
// .attr("fill","red")
.on("end",function(){
d3.select(this)
.transition()
.duration(1000)
.attr("fill","red")
.attr("r",8)
});
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.text(function(d){
return d;
})
.attr("x",function(d){
return xscale(d[0]);
})
.attr("y",function(d){
return yscale(d[1]);
})
.attr("font-size","10px")
.attr("fill","pink");
/*座標軸要最後生成纔可以,且座標軸在外部已經和比例尺綁定過了,這裏只需再調用一次就好*/
svg.select(".xaxis")
.transition()
.duration(1000)
.call(xaxis);
svg.select(".yaxis")
.transition()
.duration(1000)
.call(yaxis);
})
</script>
D3__散點圖
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.