Question

46

d3.js - how to insert new sibling elements

rated 0 times [ 53] [ 7] / answers: 1 / hits: 30509 / 12 Years ago, tue, october 23, 2012, 12:00:00

I have a problem with inserting new siblings to existing elements.

I have this structure

<svg> 

  <g> 

    <path class=data></path> 

    <path class=data></path> 

  </g>

</svg>

and want this structure

<svg> 

  <g> 

    <path class=data></path> 

    <text></text>

    <path class=data></path> 

    <text></text>

  </g>

</svg>

but if I use the d3.js insert function

d3.select(g).insert(text, path.data);

i get the following (despite selecting by class name)

<svg> 

  <g> 

    <text></text>

    <path class=data></path> 

    <path class=data></path> 

  </g>

</svg>

any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micayla

Add To Favorites

Follow

Total Points: 148

Total Questions: 92

Total Answers: 109

Location: Aruba

Member since Sat, Oct 2, 2021

3 Years ago

micayla questions

1 Web3 Issue : React Application not compiling

Fri, Dec 24, 21, 00:00, 2 Years ago

1 How to add margin in materialize css?

Thu, Apr 16, 20, 00:00, 4 Years ago

1 How can I use Material-UI Autocomplete together with react-virtualized?

Mon, Dec 9, 19, 00:00, 5 Years ago

1 Highlight rows in MUI-Datatables

Thu, Nov 14, 19, 00:00, 5 Years ago

1 Mock using jest moment().format is returning current date instead of mocked date

Tue, Aug 27, 19, 00:00, 5 Years ago

View All

answered 12 Years ago julissaimana · Accepted Answer

First of all, it's worth noting that the second argument in the insert function is a before selector. Furthermore, chained operations act on the left hand result.

So you have done

// select all the g elements (only 1)

d3.select(g)

    // For each g, insert a text element before path.data

    .insert(text, path.data);

You want to perform an operation for each child .data, so you need to select each of the .data elements and perform an action for each of them. I'm not entirely sure how d3 expects you to insert an element after a specific child. I find it much easier to use the DOM API to do the element creation and insertion, but using the d3.each function to iterate over a selection.

d3.selectAll(g > .data).each(function () {

    var t = document.createElement('text');

    this.parentNode.insertBefore(t, this.nextSibling);       

});