DataTables w/ D3js Object

somobetech

Hello, I am exploring leveraging DataTables for my D3js project. I have a d3js map of various zip codes. I also have a csv file I consume via d3 into a javascript object that holds a zip code and various dimensions about that zip code (which I would like shown in the DataTable). When a user clicks on the map/particular zip code area, I would like the data table to show only the rows relating to the zip code clicked.

In the documentation, I can see this has been done via button clicks - but my onClick method will be via a d3 svg where I will store the clicked zip code in a variable. Has anyone accomplished something along these lines or can anyone suggest where I start? Thank you!

DirceuNazareth

By coincidence I did something very similar!
I have a network map drawing with JSPlumb (similar to d3) and when some elements are clicked a update my DataTable.
To accomplish that you need to see which are the API that best suit for your use case:

How are you binding your clicks in the objects inside of the canvas?
Take a look in the API of dataTable that can filter data:
column().search(), should do the job for you (it is name search, but acts as filter)

var table = $('#example').DataTable();
 
// #column3_search is a <input type="text"> element
$('#column3_search').on( 'keyup', function () {
    table
        .columns( 3 ) //here is the collumn that holds  the zip info
        .search( this.value ) //<<<< Here you can insert the zip code that you want to filter
        .draw();
} );