5

d3.jsデータの視覚化に利用するツールを構築しています。このツールは、webcomponentss と shadowDOM に依存しています。d3.jsだけでは、shadowDOM 内のノードを選択できませんd3.select。d3内部で作業する方法はありshadowdomますか、それとも明らかな何かが欠けていますか?

詳細に：

d3.select("#insideShadowDom")

次のようなものがあれば、何も返さない/選択しません

<web-component>
#document-fragment
   <div id="insideShadowDom"></div>
</web-component>

明確にするために:shadowDOMはフレームワークによって生成されます。イニシャルshadowRoot（注入）を取得する方法を見つけました。ただし、返されるハンドルがなくても、それd3について伝えることができるかどうかはまだ疑問です。shadowDOMcreateShadowRoot()

4

3 に答える 3

3

DOM セレクターは DOM 間では機能しませんが、プロパティを介して (少なくとも Chrome では) シャドウ ルートにアクセスでき.webkitShadowRootます。これを に渡すとd3.select()、通常どおり Shadow DOM 内の任意の要素を選択できます。

ここでデモ。

于 2013-12-15T18:42:44.413 に答える
-1

これが古いことは承知していますが、最新の Polymer バージョン (1.0.0) では、次の方法でシャドウ DOM 要素にアクセスできます。

<template> ... <div id="elementId"></div> ... </template>


Polymer({
    ready: function() { var svg = d3.select(this.$.elementId).append('svg'; }
});

これにより、チャートをレンダリングし、シャドウ DOM 要素を適切に選択できます。

于 2015-06-11T17:35:45.273 に答える