如何在 SVG 图表中添加一条线（由 Google Visualization 绘制）答案

【问题标题】：How to add a line to an SVG chart (drawn by Google Visualization)如何在 SVG 图表中添加一条线（由 Google Visualization 绘制）
【发布时间】：2014-11-02 22:22:30
【问题描述】：

我正在使用 Google Visualization 绘制气泡图，并希望在 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>

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

【问题讨论】：

标签： javascript jquery svg charts

【解决方案1】：

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

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

【讨论】：

不确定我是否遵循 - 在我使用 jQuery 操作 DOM 后，我可以看到 DOM 中的元素，并且第一个圆圈上的填充肯定会发生变化。我去图书馆看看。 . .
当然，当我过去尝试直接通过 jQuery 操作 SVG 元素时，我也遇到了问题，所以即使你可以在检查器中看到它们，也可能浏览器没有渲染它们一些理由。看看这个库是否有帮助，如果没有，我们可以研究其他替代方案。元素的属性（填充、不透明度、描边）可以通过 CSS 或 JS 进行更改，我认为浏览器无法准确执行添加和删除元素。
我阅读了 Raphael，但它似乎主要关注从头开始绘制图像（并且显然是在绝对位置）。我想要做的只是在现有的 SVG 绘图中添加一条线。有什么方法可以将库“附加”到现有的 SVG 元素上？
我自己没有在项目中使用过它，但从我读到的内容来看，它可能是一个很好的解决方案。不过，就你所尝试的而言，它并没有奏效。

【解决方案2】：

如果google图表没有交互，可以用这个方法... jquery's append not working with svg element?

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

【讨论】：