d3在折线图的最高和最低值上添加圆圈

Question

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

Answer 1

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

Answer 2

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.