Using d3 - How do I select specific data from array to highlight when I click a button?

Question

I have this data:

var bardata = [10, 16, 7, 19, 18, 16, 23, 36, 31, 26, 20, 19, 23, 9, 26];

And these buttons:

var data = [{ "label": "US", "text": "US" }, { "label": "Germany", "text":   "Germany" },
    { "label": "UK", "text": "UK" }, { "label": "Average", "text": "Average" }];

var diventer = d3.select("#buttons").selectAll("div")
  .data(data)
  .enter().append("div")
  .style("display", "inline")
  .style("margin", "10px")
  .attr("id", function(data) { return data.label; });

diventer.append("button")
  .text(function(data) { return data.text; });

What kind of selector do I need to select every 3rd element in the bardata array, so that when I click a button I can highlight these bars on my graph?

This is what I currently have on mouseover, but I know it needs to be different for the buttons:

.on('mouseover', function(d) {

    tooltip.transition()
        .style('opacity', .9)

    tooltip.html(d)
        .style('left', (d3.event.pageX - 35) + 'px')
        .style('top',  (d3.event.pageY - 30) + 'px')


    tempColor = this.style.fill;
    d3.select(this)
        .style('opacity', .5)
        .style('fill', 'yellow')
})

I'm using the bardata here:

var myChart = d3.select('#chart').append('svg')
  .style('background', '#E7E0CB')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
  .selectAll('rect').data(bardata)
  .enter().append('rect')

Posted where I'm using it above. basically I have 3 buttons and when one is pushed - I want specific bars to highlight. I'm just not sure how to pinpoint specific data - I thought it would be like d(index) or data(index), but that isn't working. Thank you! — Oli Plunkett
– Oli Plunkett, Commented Oct 20, 2015 at 18:41

Lars Kotthoff · Accepted Answer · 2015-10-20 18:52:12Z

1

It looks like the data in bardata aren't unique, so you can't really use D3's data binding to select the elements. You can however filter a selection by index:

d3.selectAll("rect").filter(function(d, i) { return i % 3 == 0; });

You would need to change the test for the specific button; for example, if the index of the button corresponds to the remainder:

.on("mouseover", function(d, i) {
  d3.selectAll("rect").filter(function(e, j) { return j % 3 == i; });
});

In general, I would strongly advise to make the information you need to make the selection part of the data though, for example by having an additional attribute for the bar data that tells you which country a bar belongs to. Then you can use D3's data matching to "select" based on that or assign a class that represents the country to each rect and simply selected based on that.

answered Oct 20, 2015 at 18:52

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oli Plunkett Over a year ago

Thanks for answering and apologies for the late reply. I figured it out though - check out the result: artsy.net/article/…

Collectives™ on Stack Overflow

Using d3 - How do I select specific data from array to highlight when I click a button?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related