5

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

4

3 回答 3

5

You can pass in object -- also, use var if you need to reference the object from a callback:

<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>
于 2014-03-02T14:13:16.373 回答
3

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

演示在这里。

于 2013-12-15T18:42:44.413 回答
-1

我知道这很旧，但是，使用最新的 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 元素。

于 2015-06-11T17:35:45.273 回答