zoukankan      html  css  js  c++  java
  • [D3] 13. Cleaner D3 code with selection.call()

    selection.call() method in D3 can aid in code organization and flexibility by eliminating the need to use chained method calls for every operation.

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="../bower_components/underscore/underscore-min.js"></script>
        <script src="../ventor/d3.min.js"></script>
        <style type="text/css">
    
            body {
                padding-top: 50px;
                padding-left: 100px;
    
            }
    
            #chartArea {
                width: 400px;
                height: 300px;
                background-color: #CCC;
            }
    
            .bar {
                display: inline-block;
                width: 20px;
                height: 75px; /* Gets overriden by D3-assigned height below */
                margin-right: 2px;
                /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/
                z-index: 99;
            }
    
            .bubble, .center {
                display: inline-block;
                fill: purple;
                fill-opacity: 0.5;
                stroke: black;
                stroke-weight: 1px;;
                z-index: 15;
            }
    
            .center {
                z-index: 10;
            }
    
            .active {
                fill: magenta;
                fill-opacity: 0.5;
                stroke-width: 3px;
            }
    
            .axis path, .axis line {
                fill: none;
                stroke: #000;
                stroke-width: 1px;
                shape-rendering: crispEdges;
            }
    
        </style>
    </head>
    <body>
    <button onclick="update()">Update</button>
    <section id="chartArea"></section>
    <script>
    
        function planTrasition(selection, duration, color){
    
            selection
                    .transition()
                    .duration(duration)
                    .style('fill', color)
                    .attr('cx', function(each_data, index) {
                        return xScale(each_data.x);
                    })
                    .attr('cy', function(each_data) {
                        return yScale(each_data.y);
                    })
                    .attr('r', function(each_data, i) {
                        return each_data.r;
                    });
        }
    
        function stepTransition(selection) {
    
            selection.transition()
                    .duration(600)
                    .style('fill', "lightblue")
                    .attr('cx', function(each_data, index) {
                        return xScale(each_data.x);
                    })
                    .transition()
                    .duration(600)
                    .attr('cy', function(each_data) {
                        return yScale(each_data.y);
                    })
                    .transition()
                    .duration(600)
                    .attr('r', function(each_data, i) {
                        return each_data.r;
                    });
        }
    
        function newData(d){
            d.x = Math.round(Math.random() * 100);
            d.y = Math.round(Math.random() * 100);
            d.r = Math.round(5 + Math.random() * 10);
        }
    
        function update(){
    
            //Only the data which x < 50 will get update
            svg.selectAll('circle')
                    .filter(function(d) {
                        return d.x < 50;
                    })
                    .each( newData)
                    .call(stepTransition);
    
            svg.selectAll('circle')
                    .filter(function(d) {
                        return d.x >= 50;
                    })
                    .each( newData)
                    .call(planTrasition, 2000, "red");
        }
    
        var dataset = _.map(_.range(30), function(num) {
                    return {
                        x: Math.round(Math.random() * 100),
                        y: Math.round(Math.random() * 100),
                        r: Math.round(5 + Math.random() * 10)
                    };
                }), //reandom generate 15 data from 1 to 50
                margin = {top: 20, right: 20, bottom: 40, left: 40},
                w = 400 - margin.left - margin.right,
                h = 300 - margin.top - margin.bottom;
    
        var svg = d3.select('#chartArea').append('svg')
                .attr('width', w + margin.left + margin.right)
                .attr('height', h + margin.top + margin.bottom)
                .append('g') //The last step is to add a G element which is a graphics container in SBG.
                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.
    
    
        var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) {
                    return d.y; //tell the max function just need to care about y prop
                })])
                .range([h, 0]);
    
        var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left')
                .ticks(10)
                .innerTickSize(10)
                .outerTickSize(10)
                .tickPadding(10);
        svg.append('g')
                .attr('class', 'y axis')
                .attr('transform', 'translate(0,0)')
                .call(yAxis);
    
        var xScale = d3.scale.linear()
                .domain([0, 100])
                .range([0, w]);
    
        var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .ticks(10)
                .innerTickSize(6)
                .outerTickSize(12)
                .tickPadding(12);
    
        svg.append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0, ' + h + ')')
                .call(xAxis);
    
        svg.selectAll('circle')
                .data(dataset)
                .enter()
                .append('circle')// svg doesn't have div, use rect instead
                .attr('class', "bubble")
                .attr('cx', function(each_data, index) {
                    return xScale(each_data.x);
                })
                .attr('cy', function(each_data) {
                    return yScale(each_data.y);
                })
                .attr('r', function(each_data, i) {
                    return each_data.r;
                })
                .on('mouseover', function() {
                    d3.select(this).classed('active', true)
                })
                .on('mouseleave', function() {
                    d3.select(this).classed('active', false)
                })
                .on('mousedown', function(d) {
                    var p_cx = d.x, p_cy = d.y, p_r = d.r;
                    d3.select(this).transition().duration(500).attr('r', d.r * 1.5);
                    svg.append('circle')
                            .attr('class', "center")
                            .attr('cx', function() {
                                return xScale(p_cx);
                            })
                            .attr('cy', function() {
                                return yScale(p_cy);
                            })
                            .attr('r', function() {
                                return p_r / 4;
                            })
                            .style('fill', 'red');
                })
                .on('mouseup', function(d) {
    
                    d3.select(this).transition().duration(250).delay(100).attr('r', d.r)
                });
    </script>
    </body>
    </html>

  • 相关阅读:
    查看mysql版本的四种方法及常用命令
    newInstance和new的区别(good)
    Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 前缀表达式
    Java实现 蓝桥杯 算法训练 前缀表达式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4555701.html
Copyright © 2011-2022 走看看