Javascript 在SVG元素中存储自定义数据

Javascript 在SVG元素中存储自定义数据,javascript,d3.js,svg,Javascript,D3.js,Svg,如何在SVG元素中存储自定义数据? 例如,我有一个圆圈: var circleData = [{ x: 40, y: 40, startX: 40, startY: 40}]; var mycircle = assetGroup.append("circle").data(circleData).attr("class", "drag-circle"). attr("cx", function (d) { return d.x; })

如何在SVG元素中存储自定义数据? 例如,我有一个圆圈:

var circleData = [{ x: 40, y: 40, startX: 40, startY: 40}];
            var mycircle = assetGroup.append("circle").data(circleData).attr("class", "drag-circle").
                attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; })
                .attr("r", 8).attr("stroke", "#BBBBBB").attr("fill", "white")
                .call(this.circleDragDrop);
是的,我之所以保存startX/startY,是因为我在失败的删除操作(不是以“技术”方式失败-更像是违反“规则”)后使用这些值将圆移回其起点)

工作很好,直到。。。现在我不仅有了这个圆,还有一个具有类似行为(拖放、带位置的数据对象)的矩形。当我更改rect上的数据值时,它也会覆盖圆的
data()
中的对象。
data()
是否始终引用共享对象?有没有一种简单而好的方法来保护SVG元素中的位置等数据?

什么是
assetGroup
assetGroup.append
返回追加的元素还是
assetGroup
对象?我假设是后者,因此您在
assetGroup
上设置了
data
属性,而不是附加的圆,然后在附加矩形时覆盖它。对不起,我忘记了:assetGroup是SVG“g”组。在上面的代码之前,我有一些类似的东西:var assetGroup=d3。选择(“#资产”)。追加(“g”),因此,根据文档,
。追加
将指定名称作为当前选择中每个元素的最后一个子元素追加到新元素,返回包含追加元素的新选择。每个新元素继承当前元素(如果有)的数据,继承方式与选择子选择相同。“总之,
selection.append(foo)
foo
追加到
选择
并返回选择。调用
数据(…)
在返回的选择中更新其数据,而不是任何特定元素的数据。也许您可以使用
assetGroup.data({circle:circleData,rectangle:rectData})来遍历它。