Javascript 使用D3在谷歌图表上画线_Javascript_Jquery_Svg_D3.js_Google Visualization

Javascript 使用D3在谷歌图表上画线

javascript jquery svg d3.js google-visualization

Javascript 使用D3在谷歌图表上画线,javascript,jquery,svg,d3.js,google-visualization,Javascript,Jquery,Svg,D3.js,Google Visualization,尝试选择google图表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>

尝试选择google图表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>

我可以通过执行

var-graph=d3.select（“body”）.append（“SVG”）

但是，当我像在下面的代码中那样尝试选择GoogleChartSVG时，当我单击并拖动鼠标时，不会得到任何线条

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


线{
笔画：黑色；
笔画宽度：1px；
}
svg{
边界：1px；
}
load（“可视化”、“1”、{packages:[“地球艺术”]}）；
setOnLoadCallback（DrawRegionMap）；
函数drawRegionsMap（）{
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’]，
[‘德国’，200]，
[‘美国’，300]，
[‘巴西’，400]，
[Canada'，500]，
['France'，600]，
['RU'，700]
]);
var选项={}；
var chart=new google.visualization.geograpart（document.getElementById（'regions_div'））；
图表绘制（数据、选项）；
//划线
var线；
变量图=d3。选择（“svg”）
.on（“mousedown”，mousedown）
.on（“mouseup”，mouseup）；
函数mousedown（）{
var m=d3.鼠标（此）；
直线=图形。追加（“直线”）
.attr（“x1”，m[0]）
.attr（“y1”，m[1]）
.attr（“x2”，m[0]）
.attr（“y2”，m[1]）；
图.on（“mousemove”，mousemove）；
}
函数mousemove（）{
var m=d3.鼠标（此）；
行属性（“x2”，m[0]）
.attr（“y2”，m[1]）；
}
函数mouseup（）{
vis.on（“mousemove”，null）；
}
}

所以我把它改了一点。我添加了库jquery，以便可以执行一个简单的on document ready事件。接下来，我要做的是提取数据并将其放入一个名为points的变量中。从这一点上，我告诉d3使用这些数据，当数据发生变化时，做你自己的事情

嗯


线{
笔画：黑色；
笔画宽度：1px；
}
svg{
边界：1px；
}
load（“可视化”、“1”、{packages:[“地球艺术”]}）；
setOnLoadCallback（DrawRegionMap）；
点数=[]；
mousedown=false；
函数drawRegionsMap（）{
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’]，
[‘德国’，200]，
[‘美国’，300]，
[‘巴西’，400]，
[Canada'，500]，
['France'，600]，
['RU'，700]
]);
var选项={}；
var chart=new google.visualization.geograpart（document.getElementById（'regions_div'））；
图表绘制（数据、选项）；
}
$（函数（）{
$（文档）.mousedown（函数（）{
mousedown=true
});
$（文档）.mouseup（函数（）{
mousedown=false
});
$（文档）.mousemove（函数（e）{
如果（鼠标向下）{
push（{x:e.pageX，y:e.pageY}）；
抽绳（）；
}
});
//划线
函数drawLines（）{
如果（点长度>1）{
var lineUpdate=d3.选择（“svg”）.选择所有（“行”）.数据（点）；
lineUpdate.enter（）.append（“行”）
.attr（“x1”，函数（d，i）{
返回点[i-1].x
})
.attr（“y1”，函数（d，i）{
返回点[i-1].y
})
.attr（“x2”，函数（d，i）{
返回点[i].x
})
.attr（“y2”，函数（d，i）{
返回点[i].y
})
.attr（“样式”，“笔划：rgb（255,0,0）；笔划宽度：2”）；
}
}
});