D3 not working on dynamically created html svg
up vote
0
down vote
favorite
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?
d3.js
asked Nov 9 at 14:37
MMrj
510326
add a comment |
up vote
0
down vote
favorite
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?
d3.js
asked Nov 9 at 14:37
MMrj
510326
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 9 at 16:08
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
2
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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?
d3.js
asked Nov 9 at 14:37
MMrj
510326
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?
d3.js
d3.js
asked Nov 9 at 14:37
MMrj
510326
asked Nov 9 at 14:37
MMrj
510326
edited Nov 9 at 17:45
asked Nov 9 at 14:37
MMrj
510326
asked Nov 9 at 14:37
MMrj
510326
asked Nov 9 at 14:37
MMrj
510326
510326
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 9 at 16:08
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
2
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08
add a comment |
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 9 at 16:08
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
2
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08
1
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 9 at 16:08
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 9 at 16:08
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
2
2
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53227792%2fd3-not-working-on-dynamically-created-html-svg%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 9 at 16:08
@LoredraL Updated my question
– MMrj
Nov 9 at 18:15
2
Possible duplicate of Dynamically created SVG elements are not rendered by the browser or "Add SVG element to existing SVG using DOM".
– altocumulus
Nov 9 at 18:32
Thanks @altocumulus! that solved it
– MMrj
Nov 9 at 19:08