7

だから私はd3が行ったこのゴージャスな視覚化の私自身のバージョンを作ろうとしています：

http://mbostock.github.com/d3/talk/20111116/bundle.html

基本的に、グラフ全体を左に移動し、右側にさまざまな関係を表示しようとしているので、左側の名前にカーソルを合わせるたびに、さまざまな種類の接続の色が変わるのがわかります。グラフでは、右側にこれらの接続の名前も表示されます。

私が抱えている問題は、接続の実際の名前にアクセスすることです。私はjavascriptに不慣れで、d3にも不慣れであり、これらのSVG要素の実際の名前にアクセスする方法を理解するのに問題があります。これまでのところ、2行のコードを使用してconsole.log（）でそれを行っています。

var targetTest = d3.selectAll("path.link.target-" + d.key);
console.log(targetTest);

コンソールでは、これにより、必要なすべてのSVGオブジェクトのログが得られますが、すべての要素の完全な情報が得られます。このようなもの：

0: SVGPathElement
__data__: Object
animatedNormalizedPathSegList: null
animatedPathSegList: SVGPathSegList
attributes: NamedNodeMap
baseURI: "http://localhost/mbostock-d3-    544addb/examples/bundle2/bundle.html"
childElementCount: 0
childNodes: NodeList[0]
className: SVGAnimatedString
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
dataset: DOMStringMap
externalResourcesRequired: SVGAnimatedBoolean
farthestViewportElement: SVGSVGElement
firstChild: null
firstElementChild: null
id: ""
lastChild: null
lastElementChild: null
localName: "path"
namespaceURI: "http://www.w3.org/2000/svg"
nearestViewportElement: SVGSVGElement
nextElementSibling: SVGPathElement
nextSibling: SVGPathElement  
nodeName: "path"
nodeType: 1
nodeValue: null
normalizedPathSegList: null
offsetHeight: 0
__proto__: SVGPathElement
length: 1
parentNode: HTMLDocument
__proto__: Array[0]

アクセスしようとしているデータの一部は、さらに3つのオブジェクトを含むデータオブジェクト内にあります。

source: Object
target: Object
__proto__: Object

ソースオブジェクト（私がアクセスしようとしているもの）内に、keyという名前のフィールドがあり、これは私がアクセスしたいフィールドです

depth: 4
imports: Array[9]
key: "Interpolator"
name: "flare.animate.interpolate.Interpolator"
parent: Object
size: 8746
x: 40.62256809338521
y: 180

基本的に、このキーでdocument.writeまたは同様の$（＃id）.text（）を呼び出したいのですが、一度に1つの要素にしかアクセスできないようです。

var target = d3.selectAll("path.link.target-" + d.key);
var source = d3.selectAll("path.link.source-" + d.key);
var imports = source.property("__data__").target.key;
var exports = target.property("__data__").source.key;

しかし、これらのそれぞれは、完全なリストではなく、1つの名前しか与えません。要素にカーソルを合わせると、複数の「インポート」または「エクスポート」がある場合でも、AKA

console.log(imports)

selectAllを使用した場合でも、一度に1つの名前しか表示されません。

どんな助けでも大歓迎です！質問が少し複雑な場合は申し訳ありませんが、非常に具体的な質問であるため、できるだけ具体的にするように努めましたが、可能であれば、詳細に説明した可能性があります。とにかく前もって感謝します！

アイザック

4

1 に答える 1

3

および変数で使用eachして、最初の値だけでなく、返されるすべての値を取得します。sourcetarget

var targets = d3.selectAll("path.link.target-" + d.key);
var sources = d3.selectAll("path.link.source-" + d.key);
var imports = [];
var exports = [];
targets.each(function(d) {
  imports.push(d["source"].key);
});
sources.each(function(d) {
  exports.push(d["target"].key);
});
console.log("Imports - " + imports);
console.log("Exports - " + exports);

これがJSFiddleの動作を示しています。mouseover強調表示が行われる場所であるため、上記のコードを関数に追加しました。

D3のようなメソッドattrと舞台裏でstyle使用eachする必要はありませんが、カスタム関数を使用してデータにアクセスしているため、を使用する必要がありますeach。

于 2012-07-19T18:39:38.560 に答える