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

您可以传入对象 - 如果需要从回调中引用对象，也可以使用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工作，但您可以通过.webkitShadowRoot属性访问影子根（至少在Chrome中）。将此传递给d3.select()，然后您可以照常选择阴影DOM中的任何元素。

演示here。

Answer 3

我知道这是旧的，但是，使用最新的Polymer版本（1.0.0），您可以访问阴影dom元素：

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


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

这将允许您渲染图表并适当选择阴影dom元素。

d3.js不能在shadowDOM中工作

3 个答案: