Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3: Can't select a subset of my dataset

Tags:

d3.js

I would like to select a subset of data with .select() or .selectAll().

For example, I have a dataset:

var dataset = [4,5,6,7,9,56]

Each number of this dataset is bound to an SVG <rect>:

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect");

Now I would like to select only a subset of data for applying some stuff on it (colouring in yellow in my case).

This works for colouring every the <rect>:

var allRect = myselection.selectAll("rect")
  .attr("fill","rgb(255, 255, 0)");

But I would like to select, for example, only the <rect>s corresponding to a number between 5 and 7. Or at least the <rect> corresponding to a specific number from my dataset.

I tried:

var specificRect = myselection.selectAll("rect")[5:9]

var specificRect = myselection.selectAll("rect")[5]

var specificRect = myselection.selectAll("rect")[2,3,4]

var specificRect = myselection.selectAll("rect").data(dataset)[1]

None of those are working. Thanks for your help.

like image 558
Cyrlop Avatar asked Oct 21 '22 04:10

Cyrlop


1 Answers

The solution was the use of ".filter".

var specificRect = myselection.selectAll("rect").data(dataset)
.filter(function(d) { return (d >= 5 && d <= 9) })
like image 121
Cyrlop Avatar answered Oct 25 '22 20:10

Cyrlop