[D3] 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.

 

First thing first, you can use chrome dev tool to select one of the d3 element.

And then to access it in the console, you can use:

$0

<circle cx=​"196.00000000000003" cy=​"404.25" r=​"24" class=​"ball">​</circle>​

 

If you want to see the data, you can do:

$0.__data__

// Object{x: 40, y: 50, r: 24}

 

You can modfiy style or element by doing:

d3.select($0).style('stroke', 'red');

 

Or you want to select multi things:

d3.selectAll('circle').filter(d => d.r < 30).nodes()

.nodes() will display all the svg nodes.

 

Or do patch modifications:

d3.selectAll('circle').filter(d => d.r < 30).style('stroke', 'red')