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

Good afternoon, I'm trying to make a program to draw a graphic, however I need to erase the graphics and draw it again whenever I update. I'm using D3.js to handle svg and polymer because I'm creating a web component. In short, my code looks 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'm working on the shadow DOM, I'd like to know how to access the g element I created, since the same form of writing does not work.