When in Doubt, Log it Out

I still have a hard time judging the schedule for some projects.  I know this is a matter of experience: if you’ve set up a basic Angular application, you can probably give a solid timeframe for doing it again.  But given a new task, it might take 30 minutes or 3 days.

And sometimes the little things can make the difference between the two.

A couple weeks back, I’d hit a roadblock in our new Angular project (related to a piece of 3rd party software that I just couldn’t get to run reliably on a test machine).  To take a break, I started playing with d3 with the idea of hooking up the data source as an observable to have a ‘live refresh’ pie chart anytime someone adds a new user to a specific group.

Before integrating an observable in the mix, I started just setting it up with a returned array of the top 5 results from the database.  Seemed to work- but I also wanted to add hover effects.  Ideally, hovering over a piece of the pie, or hovering over an entry in the legend (showing the name of the group and their total users) should change the fill color of both.

That was a bit more tricky- my first thought was that d3 has a jQuery like syntax, so maybe it has some kind of .find() selector.  Couldn’t get that to work, but I did find a great tip (lost the link to it, but if I ever find it again, will cite here as it was a really good idea) to use a data- attribute.  The tutorial with that tip just put the data-key attribute directly onto the svg element in the html, but I reasoned it would be easy to do with d3.  Just add a .attr(‘data-key’, (d, i) => d.company_id) to the chain on both the legend and pie generation code and it should pop right up.  Then I could d3.selectAll(`[data-key=’${key}]`) for that data-key attribute to get both the legend text and pie piece (which would share the same data) and add a .on(‘mouseover’) event handler.

And it was easy – for the legend text.  I added the code, checked the element in DevTools, and the data-key was right there with the correct company id.  But there was nothing on the pie piece path in the svg element.  There was no console error, and the chart displayed just fine, but no data-key attribute would appear.

I started tinkering.  Maybe the order of where you add the data- attribute in the d3 chain matters, so I tried first, last, and everywhere in between (nope).  Maybe there’s a special syntax for adding a data- attribute to a path element (nope- just the normal syntax).  Maybe you can’t add a data- attribute to an svg?  But I’d already done it successfully with the legend elements.

Finally, we get to the title of this episode.  In the .attr property function (remember that you can pass a simple value as the 2nd argument to .attr, or you can pass a function to get the data associated), I added a console.log call to see what I was getting.

The answer was: nothing.  I was getting undefined for my d.company_id property, even though it was working for the legend element.  The issue was that the path element (which defines each ‘piece’ in the pie) is further ‘up’ the chain: meaning that it doesn’t just get the data, it gets a larger object (I think it includes the positioning info as well).  The point is, there was no ‘company_id’ on the object I was passing, so I was actually trying to assign my data-key to ‘undefined’.  I would have guessed this would cause some kind of error, but it apparently doesn’t- it just fails silently.  No data- attribute gets added but nothing blows up either.

So- when in doubt, log it out!  I could have saved time by checking this.  The only real issue was that I had to dig a bit deeper into the object being passed to the ‘path’ element- it has a ‘data’ property with the info I needed, so I was looking for .attr(‘data-key’, (d, i) => d.data.company_id).  With that change, I could grab both elements in the svg with the same data-key and highlight both on hover.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s