如何使用d3 v4在Google Polymer 2.0 Shadow Dom对象上执行d3.select ....

时间:2018-02-14 16:10:20

标签: javascript d3.js polymer

我创建了基于简单铁标签的Google Polymer自定义元素(动作标签)。我给了元素一个ActionEnabledLabel的id。

  <template>
    <style>
      :host {
        display: block;
        padding: 16px;
      }
    .buttons {
      background-color: #936d79;
      color:white;
      height:30px;
      font-size: 12px;
    }
    .ModelName {
      width:200px;
      color:white;
    }   
    .labels {
      width:200px;
      color:white;
    }   
  </style>
    <table  class="header1"
        id="header1">
      <td>
        <paper-input id="ModelName" class="ModelName" value='{{vmodelName}}' pattern="[A-Z]{2}[0-9]{6}"></paper-input>  
      </td>    
      <td>
        <paper-button id="SetModelNameButton" raised class="buttons" on-click="_SetModelName">Set</paper-button>
      </td>
      <td>
        <paper-button id="ModelButton"  raised class="buttons" on-tap="StartModeling">Modeling</paper-button>
      </td>   
      <td>
        <action-label id="ActionEnabledLabel" class="ActionEnabledLabel"></action-label>
      </td>            
    </table> 
    <modeler-workspace></modeler-workspace>
  </template>

现在我想选择这个对象。

<script>
    var ModelerNavBarStatus = false;
    // Your new element extends the Polymer.Element base class
    class ModelerApp extends Polymer.Element {

        static get is() { return 'modeler-app'; }

        StartModeling() {

            d3.json("../jsondata/buttons.json", function (error, data) {

                var vdata = data.ModelerButtons;

                if (ModelerNavBarStatus == false) {

                    ModelerNavBarStatus = true;


                    console.log("d3.select(#ActionEnabledLabel):  " + d3.select("#ActionEnabledLabel").attr("id"));
                }
            })
        }
    }
    //Now, register your new custom element so the browser can use it
    customElements.define(ModelerApp.is, ModelerApp);
</script>

我得到的回复是

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at ut.attr (d3.v4.min.js:2)
    at modeler-app.html:79
    at Object.<anonymous> (d3.v4.min.js:2)
    at k.call (d3.v4.min.js:2)
    at XMLHttpRequest.e (d3.v4.min.js:2)

我已经在这方面工作了一个星期......我否认d3.select不会对抗Shadow DOM ...我喜欢我的d3js ...请不要让我参与其中。 ...

0 个答案:

没有答案