使用D3在Google图表上画线
[英]Draw Lines on Google Chart Using D3
问题描述
尝试选择Google图表SVG，然后添加通过单击并拖动鼠标绘制的线。
我可以通过执行var graph = d3.select("body").append("svg")来在空白的SVG上绘制线条var graph = d3.select("body").append("svg")
但是，当我尝试选择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>
1 个解决方案
解决方案1
1 已采纳 2014-12-05 01:38:41
所以我做了一点修改。 我添加了库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>
如何绘制这张D3图表？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.