Draw Lines on Google Chart Using D3

Trying to select the google chart SVG then append a line that is drawn by clicking and dragging the mouse.

I can get the lines to draw on a blank SVG by doing var graph = d3.select("body").append("svg")

But when I try to select the google chart SVG like I did in my code below, I don't get any lines drawing when I click and drag the mouse.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>   
    <style>
        line {
            stroke: black;
            stroke-width: 1px;
        }
        svg {
            border: 1px;
        }
    </style>
</head>
<body>
<!--<div id="regions_div" style="width: 900px; height: 500px;"></div> -->
<div id="regions_div"></div>
<script>  
    google.load("visualization", "1", {packages:["geochart"]});
    google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);

        // Draw lines
        var line;
        var graph = d3.select("svg")
            .on("mousedown", mousedown)
            .on("mouseup", mouseup);

        function mousedown() {
            var m = d3.mouse(this);
                line = graph.append("line")
                .attr("x1", m[0])
                .attr("y1", m[1])
                .attr("x2", m[0])
                .attr("y2", m[1]);

            graph.on("mousemove", mousemove);
        }

        function mousemove() {
            var m = d3.mouse(this);
            line.attr("x2", m[0])
                    .attr("y2", m[1]);
        }
        function mouseup() {
            vis.on("mousemove", null);
        }
    }

</script>
</body>
</html>

Upvotes: 0

Answers (1)

getbuckts

Reputation: 386

So I changed it up a little bit. I added the library jquery so I can do a simple on document ready event. Next what I did was to extract out the data to draw and put it in a variable called points. From that I tell d3 to use that data and when it changes, do your thing.

HTH

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
        line {
            stroke: black;
            stroke-width: 1px;
        }
        svg {
            border: 1px;
        }
    </style>
</head>
<body>
<!--<div id="regions_div" style="width: 900px; height: 500px;"></div> -->
<div id="regions_div"></div>

<script>
    google.load("visualization", "1", {packages:["geochart"]});
    google.setOnLoadCallback(drawRegionsMap);
    points = [];
    mousedown = false;

    function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);



    }


    $(function() {
        $(document).mousedown(function () {
            mousedown = true
        });
        $(document).mouseup(function () {
            mousedown = false
        });
        $(document).mousemove(function (e) {
            if (mousedown) {
                points.push({x: e.pageX, y: e.pageY});
                drawLines();
            }
        });

        // Draw lines
        function drawLines() {
            if (points.length > 1) {
                var lineUpdate = d3.select("svg").selectAll("line").data(points);
                lineUpdate.enter().append("line")
                        .attr("x1", function (d, i) {
                            return points[i - 1].x
                        })
                        .attr("y1", function (d, i) {
                            return points[i - 1].y
                        })
                        .attr("x2", function (d, i) {
                            return points[i].x
                        })
                        .attr("y2", function (d, i) {
                            return points[i].y
                        })
                        .attr("style", "stroke:rgb(255,0,0);stroke-width:2");
            }
        }
    });

</script>
</body>
</html>

Upvotes: 1

Draw Lines on Google Chart Using D3

Answers (1)

Related Questions