是否可以将SVG对象的自定义属性设置为数字而不是字符串？

我正在为SVG-G元素（SVG组对象）分配人工属性。我将该组的内容与SVG转换一起移动，并将这些组的x/y坐标及其宽度/高度存储在这些属性中。是否可以将SVG对象的自定义属性设置为数字而不是字符串？

我使用的是D3 Javascript库和呼叫：

embeddedElemContainer = nodeBoxContainer.append('svg:g') 
    .attr('x', x) 
    .attr('y', y) 
    .attr('width', width) 
    .attr('height', height)

导致下列对象：

<g transform="translate(13.585786437626904,31.585786437626904)" x="13.585786437626904" y="31.585786437626904" width="43.00000000000001" height="0"></g>

这是确定的，唯一婷困扰着我的事实，该属性值以字符串形式存储。如果我想用它们进行一些计算，我不得不施放。

parseInt(@embeddedElemContainer.attr('x'))

有没有办法将这些值直接存储为整数/双？

来源

2013-06-13 karlitos

D3中的正常方法是将数据列表绑定到节点。请参阅data portion of the Selection API。 D3将它放在它创建/修改的DOM节点的__data__属性中。内部D3拉出该属性并将其作为参数传递给各种函数，但您可以直接自行访问它。

也可以通过Datum method将任意的数据结构关联到单个节点节点。

没有它很难说，但低于环境的其余部分是什么，我认为你正在尝试做一个修改版本：

var vis = d3.select("body").append("svg").attr("width", 400).attr("height", 300); 

var groupData = {x: 100, y:100, height: 50, width: 50, theanswer : 42, thecolor: "blue", somedouble: 45.1651654 }; 

var embeddedElemContainer = vis.append('svg:g') 
    .datum(groupData) 
    .attr('id', 'mygroup') 
    .attr('x', function(d) { return d.x; }) 
    .attr('y', function(d) { return d.y; }) 
    .attr('height', function(d) { return d.height; }) 
    .attr('width', function(d) { return d.width; }) 

// the regular DOM way: 
console.log(document.getElementById('mygroup').__data__) 

// the D3 way: 
console.log(d3.select('#mygroup').datum());

两个console.log报表输出：

height: 50 
somedouble: 45.1651654 
theanswer: 42 
thecolor: "blue" 
width: 50 
x: 100 
y: 100

来源

2013-06-13 14:20:10 explunit

哦！非常感谢您的好解释。我必须详细了解D3中元素的边界数据/属性。从来没有想过为了我的目的使用这个功能。 – karlitos

您可以覆盖d3的attr函数来嗅出数字并为您执行parseInt。那以后可能出现的兼容性问题，所以也许这将是最好创建一个新的attrInt功能，例如：

d3.selection.prototype.attrInt = function(name, value) { 
    if(arguments.length == 1) { 
    return parseInt(this.attr(name)); 
    } else { 
    return this.attr(name, value); 
    } 
};

声明：我没有与D3经验，所以我不知道如果是这样的正确的原型附加到;我只是从看到源头中挑选出来的。 :)

来源

2013-06-13 07:17:25

虽然这可能工作，我认为D3有一个更清洁的内置方法。看到我的答案。 – explunit

是否可以将SVG对象的自定义属性设置为数字而不是字符串？

回答

相关问题