d3.js赢了'不能在shadowDOM中工作

d3.js won't work in a shadowDOM

本文关键字：shadowDOM 工作 不能 js 赢了 d3      更新时间：2023-09-26

我正在构建一个利用d3.js进行数据可视化的工具。该工具依赖于webcomponentss和shadowDOM。CCD_ 2不能仅通过CCD_ 3来选择shadowDOM中的任何节点。有没有办法让d3在shadowdom中工作，或者我错过了一些明显的东西？

详细信息：

d3.select("#insideShadowDom")

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

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

澄清一下：shadowDOM是由一个框架生成的。我找到了一种方法来获得最初的shadowRoot（注入）。然而，我仍然想知道是否可以告诉d3关于shadowDOM，即使我没有createShadowRoot()返回的句柄。

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

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

在这里演示。

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

相关文章：