JavaScript-D3入门四-事件绑定

直接给出可以在WebServer中运行的代码，通过这个示例，你可以知道如何进行事件绑定

表格数据官方建议用csv运行效率高

d3ia_2.html

<html>
<head>
    <title>D3 in Action Examples</title>
    <!-- 演示D3的事件绑定 -->
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3ia.css" />
</head>
<script src='/d3/d3.min.js'></script>
<!--http://d3js.org/colorbrewer.v1.min.js-->
<script src="colorbrewer.v1.min.js"></script>
<script src="soccerviz.js"></script>
<body onload="createSoccerViz()">
    <div id="viz">
        <svg style="width:500px;height:500px;border:1px lightgray solid;" />
    </div>
    <div id="controls" />
</body>
</html>

soccerviz.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")
          .attr("class", "overallG")
          .attr("transform", (d, i) =>"translate(" + (i * 50) + ", 0)");

        //为新建的g.overallG添加circle和text.
        var teamG = d3.selectAll("g.overallG");

        //新建circle不带动画效果
        //teamG
        //  .append("circle")
        //  .attr("r", 20);

        //新建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);

        teamG
         .append("text")
         .attr("y", 30)
         .text(d => d.team);

        //incomingData第一行数据除了team,region其它column都作为key
        //dataKeys=["win","loss","draw","points","gf","ga","cs","yc","rc"]
        const dataKeys = Object.keys(incomingData[0])
            .filter(d => d !== "team" && d !== "region");

        //在body下添加<div id='controls'>节点，在这个节点下再添加button节点
        //Hint: 由于button.teams是不存在的，所以会添加button节点.
        d3.select("#controls").selectAll("button.teams")
           .data(dataKeys).enter()
           .append("button")
           .on("click", buttonClick)//事件绑定
        .html(d => d);

        //点击某个button对象更新视图
        function buttonClick(datapoint) {
            //datapoint的值为["win","loss","draw","points","gf","ga","cs","yc","rc"]数组中的元素！
            var maxValue = d3.max(incomingData, d => parseFloat(d[datapoint]))

            //linear map
            var radiusScale = d3.scaleLinear()
              .domain([0, maxValue]).range([2, 20])

            //更新circle对象的属性,不带动画效果
            //d3.selectAll("g.overallG").select("circle")
            //   .attr("r", d => {
            //       if (radiusScale(d[datapoint]) > 0)
            //           return radiusScale(d[datapoint]);
            //       else
            //           return 0;//r属性不接受negative number.
            //   });

            //更新circle对象的属性,带动画效果
            d3.selectAll("g.overallG").select("circle")
                .transition().duration(1000)//这行添加了动画效果
                .attr("r", d => {
                    if (radiusScale(d[datapoint]) > 0)
                        return radiusScale(d[datapoint]);
                    else
                        return 0;//r属性不接受negative number.
                })
        }//buttonClick

        //highlight同一个region的对象。
        teamG.on("mouseover", highlightRegion);
        function highlightRegion(d) {
            d3.selectAll("g.overallG").select("circle")
              .attr("class", p => {
                  return p.region === d.region ? "active" : "inactive"
              });
        }//highlightRegion

        //
        teamG.on("mouseout", function () {
            d3.selectAll("g.overallG")
            .select("circle").classed("inactive", false).classed("active", false)
        })

    }//overallTeamViz
}//createSoccerViz

worldcup.csv

"team","region","win","loss","draw","points","gf","ga","cs","yc","rc"
Germany,UEFA,7,6,0,1,19,18,4,14,4,6,0
Argentina,CONMEBOL,7,5,1,1,16,8,4,4,4,8,0
Netherlands,UEFA,7,5,0,2,17,15,4,11,4,11,0
Belgium,UEFA,5,4,1,0,12,6,3,3,2,7,1
Colombia,CONMEBOL,5,4,1,0,12,12,4,8,2,5,0
Brazil,CONMEBOL,7,3,2,2,11,11,14,-3,1,14,0
Japan,AFC,3,0,2,1,1,2,6,-4,1,4,0
United States,CONCACAF,4,1,2,1,4,5,6,-1,0,4,0

JavaScript-D3入门四-事件绑定

猜你喜欢