Debug D3 v4 with Dev Tools
Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.
[00:00] Since d3 visualizations are created using standard web technologies, you can use things like dev tools in Chrome to debug them quite easily.
[00:09] The first thing I want to look at is if we inspect one of these elements in here, we've got the special $0variable, which points to the dom element that we selected. Now, if we say $0and then look up this data property, we can actually see the data that's being rendered by that circle.
[00:33] That's something that d3 does when you create these elements. It puts the associated data object in that property so that you can inspect it just like this.
[00:42] Now, you can't change a property in that object and expect the visualization to update because there's not any sort of two-way binding. But it can be helpful to see what values are being used to render.
[00:58] Now, you can modify one of those attributes directly if you would like to. Assuming you have d3 globally available, you could say d3.select($0and then set an attribute directly like that. When we run that, we get a bigger circle here because we're directly setting that radius attribute.
[01:20] You can see that all of these circles have this CSS class named ball applied to it. We could, of course, change properties here and update our entire visualization there to see how different styles may affect things.
[01:36] You could also, of course, just modify a single element if you wanted to see, maybe, you were trying to figure out what different rollover styles or things like that may be available. You could do it directly on an element like that.
[01:52] You could even do something like filter down to just the elements in a certain part of the chart. If we were to say d3.selectAll("circle") that's going to give us all of the circles and then we can actually filter it down. Our filter function here is going to receive the data objects.
[02:07] We'll filter anything with an x property less than 30 and then spit out those notes. Now, we can see that we actually do have those dom elements there.
[02:18] If you were to remove that nodes call there, you could actually go and set different styles on here or do whatever to these things. You could set a stroke style to be red. There you go. You've styled all of those elements.
[02:33] You can see how there's different ways to play around with the elements in the browser. Sometimes, that can be a quicker feedback loop than actually editing your code, reloading the browser, and that sort of thing.