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 (注入)的方法。但是，我仍然在想，即使我没有d3返回的句柄，是否可以告诉shadowDOM有关createShadowRoot()的信息。

Answer 1

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

演示这里。

Answer 2

您可以传入对象--如果需要引用回调中的对象，也可以使用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 3

不过，我知道这是旧的，使用最新的聚合物版本(1.0.0)，您可以使用以下方法访问影子dom元素：

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


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

这将允许您呈现图表并适当地选择影子dom元素。