Adding sub element based on data using D3

Question

I have a following html structure

<thead class="table-header">   
  <tr>
    <th><div class="th-inner">a</th>
    <th><div class="th-inner">b</th>
    <th><div class="th-inner">c</th>   
  </tr> 
</thead>

And I want to add div with class th-but right next to div th-inner based on simple data array with three elements (mydata=['x', 'y', 'z']).

I tried following but it doesn't seem to work:

cells = d3.select('root').select('thead.table-header tr')
   .selectAll('div.th-inner').data(mydata)
   .selectAll('div.th-but').data(function(d,i){return d;});

cells.enter().append('div').classed('th-but', true);

Am I missing something? Am I going in right direction with solution?

What is root?

hughes
– hughes

2016-11-21 21:42:27 +00:00
Commented Nov 21, 2016 at 21:42 — hughes
– hughes, Commented Nov 21, 2016 at 21:42

hughes · Accepted Answer · 2016-11-21 21:52:18Z

1

If you want div.th-but to be a sibling of div.th-inner, you need to append it to the their parent element th. You can use insert for this, or select the parent element directly.

var cells = d3.select('.table-header tr')
  .selectAll('th').data(mydata)
  .selectAll('div.th-but').data(function(d) { return d; });

cells.enter()
  .append('div')
  .classed('th-but', true);

or

var cells = d3.select('.table-header tr')
  .selectAll('div.th-inner').data(mydata)
  .selectAll('div.th-but').data(function(d) { return d; });

cells.enter()
  .insert('div')
  .classed('th-but', true);

jsfiddle

answered Nov 21, 2016 at 21:52

hughes

5,7113 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xwhyz Over a year ago

Got it, my problem is that actually my data is an array of objects. Any idea why it doesn't work for objects? Let's assume I only want to add classed <div> Element without any content

Collectives™ on Stack Overflow

Adding sub element based on data using D3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related