CODEWITHSUNDEEP
javascriptd3.js
Peter
Peter

Reputation: 1290

d3 adding circles on the highest and lowest value on line chart

I know when you want to add circles (dots) on a line chart that this is the way to go

pathContainers.selectAll('circle')
.data(function (d) { return d; })
.enter().append('circle')
.attr('cx', function (d) { return xScale(d.x); })
.attr('cy', function (d) { return yScale(d.y); })
.attr('r', 3);

But i would like to put circles only on the highest and lowest point. How can i accomplisch that?

here i found a JSBIN of a d3 chart with the above code inside, perhaps this is a good example to work with

JSBIN LINE CHART

Upvotes: 2

Views: 283

Answers (2)

rmoestl
rmoestl

Reputation: 3155

For these kind of things d3.js provides the very convenient selection.filter(selector) function that allows to

apply operators to a subset of elements.

As selector you can also pass a function with which you're able to determine the min and max data values.

Upvotes: 1

Tim B
Tim B

Reputation: 1983

Change the radius to :

.attr('r', function (d) { 
  return d.y == yExtents[0] || d.y == yExtents[1] ? 3 : 0;;
})

Like that, only the highest points and lowest will have a circle with a visible radius, the other points will have a circle of radius of 0

See http://jsbin.com/forezavuhu/1/edit?html,output

Upvotes: 2

Related Questions