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 に答える