0

D3 is working on a static html element

  <div id="main-container">
    <svg id="chart" width="300px" height="500px"></svg>
  </div>

But its not working on a dynamically created one.

let newChart = document.createElement("svg");
newChart.id = "chart";
newChart.setAttribute('width', '300px');
newChart.setAttribute('height', '500px');
mainContainer.append(newChart);

D3 Code

this.svg = d3.select(`#chart`);
this.g = this.svg.append("g").attr("transform", "translate(" + MARGIN.left + "," + MARGIN.top + ")");
...

Any idea on why this may be happening?

Miguel Morujão
  • 1,131
  • 1
  • 14
  • 39
  • 1
    Can you add more info of what you are trying to do? No matter what d3 should work normally. You can try something like d3.select("#"+dynamic.id) – Loredra L Nov 09 '18 at 16:08
  • @LoredraL Updated my question – Miguel Morujão Nov 09 '18 at 18:15
  • 2
    Possible duplicate of [Dynamically created SVG elements are not rendered by the browser](https://stackoverflow.com/questions/41161094/dynamically-created-svg-elements-are-not-rendered-by-the-browser) or ["Add SVG element to existing SVG using DOM"](/q/16488884). – altocumulus Nov 09 '18 at 18:32
  • Thanks @altocumulus! that solved it – Miguel Morujão Nov 09 '18 at 19:08

0 Answers0