d3.js不能在shadowDOM中工作

Question

我正在构建一个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有关shadowDOM,即使我没有手柄createShadowRoot()返回.

Answer 1

您可以传入对象 - 如果需要从回调引用对象,也可以使用var:

<polymer-element name="my-element">
    <template>
        <div id="foobar"></div>
    </template>
    <script>
        Polymer('my-element', {
            ready: function() {
                var foobar = this.$.foobar;
                someCallback(function() {
                    d3.select(foobar).
                    ...
                }); 
                ...
            }
        });
    </script>
</polymer-element>

Answer 2

虽然 DOM 选择器不能跨 DOM 工作，但您可以通过该属性访问影子根（至少在 Chrome 中）.webkitShadowRoot。将其传递给d3.select()，然后您可以像往常一样选择影子 DOM 中的任何元素。

演示在这里。