javascript - d3.js 不能在 shadowDOM 中工作

Question

我正在构建一个利用 d3.js 进行数据可视化的工具。该工具依赖于 webcomponentss 和 shadowDOM。 d3.js 无法仅通过 d3.select 选择 shadowDOM 中的任何节点。有没有办法让 d3 在 shadowdom 中工作，还是我遗漏了一些明显的东西？

详细说明:

d3.select("#insideShadowDom")

如果你有类似的东西，就不会返回/选择任何东西

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

澄清一下:shadowDOM 是由框架生成的。我找到了一种获取初始 shadowRoot(注入(inject))的方法。但是，我仍然想知道是否可以将 shadowDOM 告诉 d3，即使我没有 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>