d3.js 不能在 shadowDOM 中工作答案

【问题标题】：d3.js won't work in a shadowDOMd3.js 不能在 shadowDOM 中工作
【发布时间】：2013-12-31 17:09:24
【问题描述】：

我正在构建一个利用 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() 返回的句柄。

【问题讨论】：

你能发一个例子吗？我对 shadow DOM 没有任何经验，但据我所知，原则上你应该能够使用 D3。
如果我理解正确，你不能跨越 DOM 边界，即你选择的东西必须在正确的 DOM 中。所以像elementInShadowDom.select("#insideShadowDom") 这样的代码应该可以工作。
我在 d3 根对象上调用 select 并且它肯定不会返回任何内容，但我会再次检查。您建议在 dom 元素本身上调用 select ？
是的——比如var foo = d3.select("...").append("..."); foo.select("...")。
不，这不会为 d3 打开 shadowDOM

标签： javascript d3.js dart angular-dart shadow-dom

【解决方案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>

【讨论】：

【解决方案2】：

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

演示here.

【讨论】：

我知道已经过了六年了，但是这个例子已经失效了
部分函数改名 --> jsfiddle.net/Lpa3kw1j

【解决方案3】：

我知道这是旧的，但是，使用最新的 Polymer 版本 (1.0.0)，您可以通过以下方式访问 shadow dom 元素：

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


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

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

【讨论】：