CODEWITHSUNDEEP
d3.js
coure2011
coure2011

Reputation: 42404

Insert element as sibling using D3js

I have an html structure like this

<div>
    <div><span id="span1">Test 1</span></div>
    <div><span id="span2">Test 2</span></div>
    <div><span id="span3">Test 3</span></div>
    <div><span id="span4">Test 4</span></div>
</div>

I have to insert an svg element, using jQuery I can easily do it like

for(var i in arr)
    $('.span' + i).parent().append('<svg />')

How can I acheive the same using D3.js? as d3.select('.span' + i).parent is giving error parent is not a function

Upvotes: 0

Views: 858

Answers (1)

mgraham
mgraham

Reputation: 6207

var pnode = d3.select('.span' + i).node().parentNode

d3.select returns a selection, use node() to return the actual dom node, and then parentNode to get the parent

You'll then have to re-select that parent node in another d3 selection to do d3 things to it

d3.select(pnode)

PS. For your example above it'll need to be '#span' to select the nodes by id, not '.span' (and it'd probably be better to selectAll the nodes at once and then .each the result rather than a loop) but I think that's the parent thing covered

Upvotes: 4

Related Questions