D3 Examples - Pluie croisée

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pluie croisée</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <style type="text/css">
            svg {
                background-color: white;
            }
            line {
                stroke: black;
            }
            .high {
                stroke: green;
            }
        </style>
    </head>
    <body>
​
        <svg></svg>
        <script type="text/javascript">     
            var cX = 250, cY = 250, long = 10;
            var W = 1000, H = 600;
            var stdev = 150;
            
            var svg = d3.select("svg")
                        .attr("width",W)
                        .attr("height",H);
            
            var randomizeW = d3.random.normal(W/2, stdev);
            var randomizeH = d3.random.normal(H/2, stdev);
            
            for(i=0;i<5000;i++){
                var x = randomizeW();
                var y = randomizeH();
                svg.append("line")
                    .attr("x1",x)
                    .attr("y1",y)
                    .attr("x2",x + long)
                    .attr("y2",y + long + 20);
            }
            //var lines = d3.selectAll("line").on("mouseover", function(){ d3.select(this).classed("high",true);});
            var lines = d3.selectAll("line").on("mouseover", function(){ 
                            var el = d3.select(this);
                            var chose = el.attr("x1");
                            d3.select(this).transition().duration(700).attr("x2",chose - long); 
                        });
        </script>
​
    </body>
</html>
    