本文介绍了Svg线不显示在谷歌图表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在谷歌折线图上添加一行。
我正在使用svg进行转换。如果我不使用 google.load（'visualization'，'1'，{packages：['corechart']，callback：drawChart}）; 来画线然后移动垂直线正在工作，但如果我绘制图表，则不显示垂直线。
以下是我在谷歌折线图上绘制移动垂直线的代码。
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi?.js>< / script>
< script src =http://code.jquery.com/jquery-1.10.1.min.js>< / script>
< script type =text / javascriptsrc =http://d3js.org/d3.v2.js>< / script>
< script type =text / javascriptsrc =underscore.js>< / script>
< style>
.selection_line
{
stroke：rgba（0，0，0，0.6）;
形状渲染：crispEdges;
}
< / style>
< script type =text / javascript>
$（function（）{
// Handler for .ready（）called。
var graph = d3.select（'＃graph'）
.append（'svg' ）
.attr（'width'，'100％'）
.attr（'height'，600）;
var line = graph.append（ 'line'）
.attr（'transform'，'translate（0，50）'）
.attr（{'x1'：0，'y1'：0，'x2'：0， 'y2'：300}）
.attr（'class'，'selection_line'）;
var x = 0;
graph.on（'mousemove '，function（）{
x = d3.mouse（this）[0];
}）;
var draw = function（）{
line
.transition（）
.duration（18）
.attrTween（'transform'，d3.tween（'translate（'+ x +'，50）'，d3.int erpolateString））
.each（'end'，draw）;
};
draw（）;
google.load（'visualization'，'1'，{packages：['corechart']，callback：drawChart}）;
}）;
函数drawChart（）{
//创建并填充数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'number'，'x'）;
//将一个annotation角色列添加到域列
data.addColumn（{type：'string'，role：'annotation'}）;
data.addColumn（'number'，'y'）;
//添加100行伪随机数据
var y = 50; （Math.random（）* 5）* Math.pow（-1，Math.floor（Math（Math））（Math.floor（Math.random .random（）* 2））;
data.addRow（[i，null，y]）;
//在DataTable的末尾添加一个空白行以保存注释
data.addRow（[null，null，null]）;
//获取用于注释的行的索引
var annotationRowIndex = data.getNumberOfRows（） - 1;
var options = {
height：400，
width：600
};
//创建图表
var chart = new google.visualization.LineChart（document.getElementById（'graph'））;
//绘制图表
chart.draw（data，options）;
}
< / script>
< / head>
< body>
< div id =graph>< / div>
< / body>
解决方案
var line = graph.append（'line'）
.attr（'transform'，'translate（100，50）'）
.attr（{'x1'：0，'y1'：0，'x2'：400，'y2'：0}）
.attr（'class'，'selection_line'）;
$ b graph.on（'mousemove'，function（）{
line.attr（y1，d3.event.y - 50）;
line.attr（ y2，d3.event.y-50）;
}）;
完整示例。
I am trying to add one line on top of google line chart.
I am using svg for transforming line. If i dont use google.load('visualization', '1', {packages: ['corechart'], callback: drawChart}); to draw line then a moving vertical line is working but if i draw chart then vertical line is not displayed.
Following is my code of drawing moving vertical line on google line chart.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<style>
.selection_line
{
stroke: rgba(0, 0, 0, 0.6);
shape-rendering: crispEdges;
}
</style>
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
var graph = d3.select('#graph')
.append('svg')
.attr('width', '100%')
.attr('height', 600);
var line = graph.append('line')
.attr('transform', 'translate(0, 50)')
.attr({'x1': 0, 'y1': 0, 'x2': 0, 'y2': 300})
.attr('class', 'selection_line');
var x = 0;
graph.on('mousemove', function() {
x = d3.mouse(this)[0];
});
var draw = function() {
line
.transition()
.duration(18)
.attrTween('transform', d3.tween('translate(' + x + ', 50)', d3.interpolateString))
.each('end', draw);
};
draw();
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
});
function drawChart() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
// add an "annotation" role column to the domain column
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'y');
// add 100 rows of pseudorandom data
var y = 50;
for (var i = 0; i < 100; i++) {
y += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
data.addRow([i, null, y]);
}
// add a blank row to the end of the DataTable to hold the annotations
data.addRow([null, null, null]);
// get the index of the row used for the annotations
var annotationRowIndex = data.getNumberOfRows() - 1;
var options = {
height: 400,
width: 600
};
// create the chart
var chart = new google.visualization.LineChart(document.getElementById('graph'));
// draw the chart
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="graph"></div>
</body>
解决方案
To achieve this, you have to append a line to the SVG that is generated by the Google chart and move it according to the position of the mouse pointer, ignoring the x component:
var line = graph.append('line')
.attr('transform', 'translate(100, 50)')
.attr({'x1': 0, 'y1': 0, 'x2': 400, 'y2': 0})
.attr('class', 'selection_line');
graph.on('mousemove', function() {
line.attr("y1", d3.event.y - 50);
line.attr("y2", d3.event.y - 50);
});
Complete example here.
这篇关于Svg线不显示在谷歌图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
06-25 18:54