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

彼德

我知道当您想在折线图上添加圆圈(点)时,这是一种方法

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线图

B队

将半径更改为:

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

这样,只有最高点和最低点将具有一个可见半径的圆,其他点将具有半径为0的圆

参见http://jsbin.com/forezavuhu/1/edit?html,输出

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

D3中的嵌套图和折线图

来自分类Dev

D3 折线图 - 在 Y 轴刻度和非刻度上显示值标签

来自分类Dev

D3 –折线图问题

来自分类Dev

d3累积折线图

来自分类Dev

如何在D3折线图中添加交互式功能(折线和标签)?

来自分类Dev

带圆圈的 d3.js 实时折线图

来自分类Dev

在 d3 中,如何将样式应用到折线图的折线图和折线图下方的区域?

来自分类Dev

仅在 d3.js 条形图的 Y 轴上保持最高和最低值

来自分类Dev

D3折线图,显示第一个和最后一个点的值

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

D3将点添加到多个堆积的折线图中

来自分类Dev

消除D3基本折线图过渡中的突然添加/删除

来自分类Dev

在d3(v4)折线图中动态添加/删除线

来自分类Dev

尽管y轴本质上是递增的,但D3折线图向后绘制

来自分类Dev

D3在时间轴上内插折线图

来自分类Dev

D3:在多行折线图中跳过空值

来自分类Dev

d3多折线图工具提示值数据未定义

来自分类Dev

D3折线图在最大数字处给出错误的值

来自分类Dev

D3 - 折线图,没有值时不显示线

来自分类Dev

D3的简单多折线图

来自分类Dev

D3中的折线图动态数据更新

来自分类Dev

透视JSON的D3多系列折线图

来自分类Dev

在D3中的折线图下填充颜色

来自分类Dev

d3折线图在顶部截断

来自分类Dev

d3中json数据的折线图

来自分类Dev

使用D3更新多折线图的模式

来自分类Dev

D3中的动画折线图