Appending multiple non-nested elements for each data member with D3.js

by

The idomatic way of doing is with nesting:

var divs = d3.select('#parent').selectAll('p').data(data).enter().append('div');

divs.append('p')
divs.append('p')

Which creates:

<div id="parent">
  <div>
    <p> from data[0] </p>
    <p> from data[0] </p>
  </div>

  <div>
    <p> from data[1] </p>
    <p> from data[1] </p>
  </div>

  <div>
    <p> from data[2] </p>
    <p> from data[2] </p>
  </div>
</div>

If that won’t work, save your selection and repeatedly append:

var enterSelection = d3.select('#parent').selectAll('p').data(data).enter();

enterSelection.append('p')
enterSelection.append('p')

then sort what you’ve added:

d3.select('#parent').selectAll('p').sort(function(a, b){ return a.index - b.index; })

You’ll need to add an index property to each element of data that describes the sort order. The normal i is only defined in the context of a particular selection, which is lost when we reselect.

More Related Contents:

  1. Parse an HTML string with JS
  2. jQuery document.createElement equivalent?
  3. When should I use jQuery’s document.ready function?
  4. How can I count text lines inside an DOM element? Can I?
  5. querySelector, wildcard element match?
  6. variable scope in d3 javascript
  7. How to serialize DOM node to JSON even if there are circular references?
  8. Replacing d3.transform in D3 v4
  9. Dynamically creating HTML elements using Javascript?
  10. What’s standard behavior when element is clicked? Will it submit the form?
  11. Add SVG element to existing SVG using DOM
  12. How to access DOM elements in electron?
  13. Difference between .tagName and .nodeName
  14. How to retrieve the element where a contextmenu has been executed
  15. Removing HTMLCollection elements from the DOM
  16. Generate (multilevel) flare.json data format from flat json
  17. HTML Table with vertical rows
  18. Is it the last `script` element the currently running script?
  19. Is there a difference between `new Image()` and `document.createElement(‘img’)`?
  20. How to add DOM element script to head section?
  21. How to translate ‘this’ in D3 JavaScript to TypeScript?
  22. React, losing saved data in localStorage with useEffect after page refresh
  23. React.js: How to append a component on click?
  24. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  25. How to add a onclick event to an element using javascript
  26. Test if an element can contain text
  27. Load javascript async, then check DOM loaded before executing callback
  28. How to check null objects in jQuery
  29. Screen Coordinates of a element, via Javascript
  30. Vanilla JS event delegation – dealing with child elements of the target element

Leave a Comment