CODEWITHSUNDEEP
javascriptjqueryd3.js
Matt
Matt

Reputation: 982

D3 visualization - how to automate button selection

I'm new to D3 (and javascript) but have adapted this visualization for my purposes:

D3 visualization

The code

How can I automate the clicking of the buttons so that the browser goes to each button on an infinite loop?

I tried using jQuery with $("#button_id").click(); but it didn't do anything.

Upvotes: 0

Views: 43

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Since the function is being called with the button's ID...

myBubbleChart.switchMode(buttonId);

The task here is relatively simple.

First, set an array with all the IDs:

var ids = ["all", "region", "Change", "change_vs_net_value", "assets_on_map"];

Then, loop through it calling myBubbleChart.switchMode() function. Here is a very simple way, using d3.timeout, to call the function every 3 seconds (and changing the buttons appearance as well):

var index = 0;
d3.interval(function() {
    myBubbleChart.switchMode(ids[(index++) % 5])
    d3.selectAll(".button").classed("active", function(_, i) {
        return i === index % 5 - 1;
    })
}, 3000)

Here is the demo bl.ocks: http://blockbuilder.org/GerardoFurtado/dfaaedf591b980c2864eb054c7b29300

Upvotes: 1

Related Questions