我正在为 SVG-G 元素(SVG 组对象)分配人工属性。我使用 SVG 转换移动组及其内容,并将组的 x/y 坐标及其宽度/高度存储在这些属性中。
我正在使用 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'))
有没有办法将这些值直接存储为整数/ double ?
最佳答案
D3 中的常规方法是使用绑定(bind)到节点的数据列表。查看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
关于javascript - 是否可以将 SVG 对象的自定义属性设置为数字而不是字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17081244/