CS50-Web-Programming-with-Python-and-JavaScript/lecture6/draw1.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
32
33
34
35
36
37
38
<!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');
        let drawing = false;

        function draw_point() {
            if (!drawing)
                return;

            const coords = d3.mouse(this);

            svg.append('circle')
               .attr('cx', coords[0])
               .attr('cy', coords[1])
               .attr('r', 5)
               .style('fill', 'black');
        };

        svg.on('mousedown', () => {
            drawing = true;
        });

        svg.on('mouseup', () => {
            drawing = false;
        });

        svg.on('mousemove', draw_point);

    </script>
</html>