how to access a shadowDom element using D3.js and Polymer

Question

Good afternoon, I’m trying to make a program for denhar a graphic, but I need to delete the graphics and draw it again whenever I update. I’m using D3.js to manipulate svg and Polymer because I’m creating a web component. In short my code is like this:

<link rel="import" href="../polymer/polymer-element.html">

<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>

<dom-module id="soma-linechart">



<template>

  <svg id="mySvg" width="960" height="500"></svg>

</template>



<script> 

class SomaLinechart extends Polymer.Element {
  static get is() { return 'soma-linechart'; }


  ready(){
    super.ready()

    var svg = d3.select(this.$.mySvg),
    g = svg.append("g").attr("id","myg");

  }   
}
customElements.define(SomaLinechart.is, SomaLinechart);


</script>
</dom-module>

to access the svg element I use the D3 command:

var a = d3.select(this.$.mysvg)

because I am working on shadow DOM, but I would like to know how to access the g element that I created, because the same form of writing does not work.