7

我将人工属性分配给 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'))

有没有办法将这些值直接存储为 integer/double ？

4

2 回答 2

6

D3 中的常规方法是拥有绑定到节点的数据列表。请参阅Selection API 的数据部分。D3 将它放在__data__它创建/修改的 DOM 节点的属性中。D3 在内部提取该属性并将其作为参数传递给各种函数，但您当然可以自己直接访问它。

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

没有其余的上下文很难说，但下面是我认为你正在尝试做的修改版本：

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-13T14:20:10.407 回答
0

你可以重写 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-13T07:17:25.387 回答