Draw Lines on Google Chart Using D3
Question
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>
1 answers
solution1
1 ACCPTED 2014-12-05 01:38:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.