Question

我正在使用Google可视化绘制气泡图，并希望在Google呈现后向图表添加一条线。我可以看到组成图表的圆形元素并通过jQuery解决它们（例如，更改圆圈的颜色），并尝试将线元素添加为圆形的兄弟。

执行后

$('svg').find('circle:first').attr('fill', 'blue');
$('svg').find('circle:first').after(
    "<line x1='153' y1='383' x2='381' y2='236' stroke='black' stroke-width='2'></line>"
);

第一个圆圈变为蓝色，但不显示任何线条。我可以检查DOM并查看：

<circle cx="153.6111617460369" cy="383.625" r="30" stroke="#cccccc" stroke-width="1" fill-opacity="0.8" fill="blue"></circle>
<line x1="153" y1="383" x2="381" y2="236" stroke="black" stroke-width="2"></line>
<circle cx="381.7818593144754" cy="236.68327383367495" r="19" stroke="#cccccc" stroke-width="1" fill-opacity="0.8" fill="#deb887"></circle>

除了添加行元素以使svg元素出现以使行出现之外，我还需要做些什么吗？

Answer 1

我不知道jQuery库是否允许您修改SVG元素（以及它们内部的元素）。我认为它只支持标准的HTML元素。

我会查看这个库：http://raphaeljs.com/，因为它似乎可以完全解决您的问题！

Answer 2

如果谷歌图表没有互动，你可以使用这种方法...... jquery's append not working with svg element?

否则你可能需要尝试使用d3 ... Svg line not displayed on google charts?

如何在SVG图表中添加一行（由Google Visualization绘制）

2 个答案: