SVGオブジェクトのカスタム属性を文字列ではなく数値として設定できますか？

Question

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> 

これはOKですが、私を悩まのみティンは、その属性、事実であります値は文字列として格納されます。ある計算にそれらを使用したい場合、私は強制的にキャストします。

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

これらの値を整数/倍数として直接格納する方法はありますか？

Answer 1

D3の通常のアプローチは、ノードにバインドされたデータのリストを持つことです。 data portion of the Selection APIを参照してください。 D3はこれを作成/変更するDOMノードの__data__プロパティに置きます。内部的にD3はそのプロパティを取り出し、それをパラメータとしてさまざまな関数に渡しますが、確実に直接アクセスできます。

を使用してノードにというノードに任意のデータ構造を関連付けることもできます。それは言うのは難しいですが、下記の私はあなたがやろうとしていると思うものの修正版であるコンテキストの残りの部分がなければ

：

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 

Answer 2

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と経験を持っていないので、それがある場合、私はわからないんだけどに接続する正しいプロトタイプ。私はちょうどソースを見てからそれを選んだ。 :)