JavaScript-D3入门五-数据和字符串数组映射到颜色模型

基于《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