基于《JavaScript-D3入门四-事件绑定》中的代码。
这里只要soccerviz2.js代替上一篇的soccerviz.js,就可以在Web Server上运行html,一边修改代码一边观察运行效果。
下面是soccerviz2.js源代码
//soccerviz2.js
//演示颜色映射的几种方式
function createSoccerViz() {
d3.csv("/data/worldcup.csv", data => {overallTeamViz(data)})
function overallTeamViz(incomingData) {
//根据incomingData的行数添加g.overallG
d3.select("svg")
.append("g")
.attr("id", "teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g")
.data(incomingData)
.enter()
.append("g")//设incomingData中数据的行数为n,添加n个g对象。
.attr("class", "overallG")
.attr("transform", (d, i) =>"translate(" + (i * 50) + ", 0)");//为n个对象设置各自的(x,y)属性
//返回class属性为overallG的所有g节点,即teamG是一个含g节点的数组。
var teamG = d3.selectAll("g.overallG");
//每个g.overallG对象下新建circle,带动画效果
teamG
.append("circle")
.attr("r", 0)
.transition().delay((d, i) => i * 100).duration(500)//多个circle依次变大
.attr("r", 40)
.transition().duration(500)
.attr("r", 20);
//g.overallG下新建text
te