1

I'm confused about this behavior and was hoping someone might have some insight. I have an array defined as:

arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]

My D3 script is such:

var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
        .data(arr_subpop_unique)
      .enter().append("div")
        .attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
        .html(function(d,i){ console.log(d,i); return d; });

The issue is that the index is starting on 1, so I am losing the "CPL" value. I'm logging this in the console and it clearly starts at 1 instead of 0. Can anyone see a problem with this?

Thanks!

thefreeline
  • 621
  • 1
  • 12
  • 26
  • I just tried your code and I get the CPL, all I did was change #d3-sizemap-hr to body. Is it possible you have some CSS related to that d3-sizemap-hr that is hiding/blocking it? –  Mar 30 '15 at 02:33
  • 2
    Do you already have a `
    ` inside `#d3-sizemap-hr` by any chance?
     – GregL Mar 30 '15 at 02:34
  • 1
    @GregL - Awesome. Yes, I had a spacer
    . Removed it and it works great. Want to add this as an answer and I'll accept it? Thanks!
     – thefreeline Mar 30 '15 at 02:38

1 Answers1

3

It seems like you already have a <div> inside the element with an ID of d3-sizemap-hr.

The reason this is a problem is that you are only populating elements in the .enter() state, which will not occur for the existing div.

I have the following recommendations:

  • Always have a unique class for your dynamically added elements with D3
  • Have the minimum possible for the .enter() state, such as your .append() and then any other static styles that don't ever vary based on the data changing. Everything else goes in the update state.
GregL
  • 37,147
  • 8
  • 62
  • 67
  • Thanks for the recommendations as well. I'm able to get some things built in D3, but I'm still not fully grasping the fundamentals of the enter/update/exit. Getting there one step at a time. Thanks again! – thefreeline Mar 30 '15 at 02:47
  • 1
    I found [this page](http://bost.ocks.org/mike/join/) by Mike Bostock himself helpful with getting my head around that stuff. – GregL Mar 30 '15 at 02:48
  • 2
    I know what you mean, thefreeline. I found [this page](http://bost.ocks.org/mike/selection) helpful. Reading one good explanation once isn't enough for me. It takes practice. – Mars Mar 30 '15 at 03:54