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

我正在使用Google Visualization绘制气泡图表，并希望在Google呈现它之后向图表中添加一行。我可以看到构成图表的圆形元素，并通过jQuery处理它们（例如，更改圆形的颜色），并试图将线元素作为兄弟元素添加到圆圈中。如何在SVG图表中添加一行（由Google Visualization绘制）

我执行

$('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元素导致线路出现？

来源

2014-11-02 Larry Lustig

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

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

来源

2014-11-02 22:42:57 Alex

不知道我跟随 - 在使用jQuery处理它们之后，我可以*看到* DOM中的元素，并且第一个圆上的填充确实在变化。我会看看图书馆。。。 – 2014-11-02 23:02:40

当然，当我试图在过去直接通过jQuery来操作SVG元素时，我也遇到了问题，即使你可以在检查器中看到它们，也许浏览器不会因为某些原因而渲染它们。看看图书馆是否有所帮助，如果不是，我们可以研究其他选择。元素的属性（填充，不透明度，笔画）可以通过CSS或JS修改，这是我认为浏览器无法准确执行的附加和删除元素。 – Alex 2014-11-02 23:38:48

我读到了拉斐尔，但它似乎主要关注从头开始绘制图像（显然是在绝对位置）。我想要做的只是将一行添加到现有的SVG图形中。有什么方法可以将库附加到现有的SVG元素上？ – 2014-11-03 00:42:35

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

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

来源

2017-08-30 23:21:55

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

回答

相关问题