使用 D3 在 Google Chart 上画线答案

【问题标题】：Draw Lines on Google Chart Using D3使用 D3 在 Google Chart 上画线
【发布时间】：2014-12-05 00:30:01
【问题描述】：

尝试选择谷歌图表 SVG，然后添加一条通过单击并拖动鼠标绘制的线。

我可以通过 var graph = d3.select("body").append("svg") 在空白 SVG 上绘制线条

但是当我尝试像在下面的代码中那样选择谷歌图表 SVG 时，当我单击并拖动鼠标时，我没有绘制任何线条。

<!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>

【问题讨论】：

标签： javascript jquery svg d3.js google-visualization

【解决方案1】：

所以我稍微改了一下。我添加了库 jquery，所以我可以在文档就绪事件上做一个简单的事情。接下来我所做的是提取要绘制的数据并将其放入一个名为 points 的变量中。我告诉 d3 使用该数据，当它发生变化时，做你的事。

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>

【讨论】：