CS50-Web-Programming-with-Python-and-JavaScript/lecture6/circle3.html at master · python-test-code/CS50-Web-Programming-with-Python-and-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
    <head>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <svg id="svg" style="width:100%; height:800px"/>
    </body>
    <script>

        const svg = d3.select('#svg');

        const c = svg.append('circle')
                     .attr('cx', 200)
                     .attr('cy', 200)
                     .attr('r', 50)
                     .style('fill', 'blue');

        c.transition()
         .duration(1000)
         .delay(1000)
         .attr('cx', 500);

        c.on('click', function() {
            d3.select(this).transition()
                           .duration(3000)
                           .style('fill', 'red');
        });

    </script>
</html>