Question

我知道你想在折线图上添加圆圈（点），这是要走的路

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);

但我想把圈子放在最高点和最低点。我怎么能完成那个？

在这里，我发现了一个带有上述代码的d3图表的JSBIN，也许这是一个很好的例子，可以使用

JSBIN LINE CHART

Answer 1

将半径更改为：

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

就像那样，只有最高点和最低点会有一个半径可见的圆，其他点会有一个半径为0的圆

请参阅http://jsbin.com/forezavuhu/1/edit?html,output

Answer 2

对于这些事情，d3.js提供了非常方便的selection.filter(selector)功能，允许

将运算符应用于元素子集。

作为selector，您还可以传递function，您可以使用该@{Html.EnableClientValidation(false);} @Html.RadioButtonFor(m => m.MyRadioButton) @{Html.EnableClientValidation(true);}确定最小和最大数据值。

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

2 个答案: