使用d3将数据标签和标记添加到折线图

Question

我尝试了各种将标记和标签添加到折线图中的方法。

我尝试使用enter（）方法将圈子添加到折线图中。 我能够获得的是快照中提到的组级别的起点或起点。

这是我到目前为止尝试过的jsfiddle 。

请咨询，如果需要任何进一步的信息。

以下是我尝试创建标记的代码段

g.append('circle')
                    .attr("class"   ,"circle")    
                    .attr('cx',function(d) { return xScale(d[0]) ; })
                    .attr('cy',function(d) { return xScale(d[1]) ; })
                    .attr('r',22);

Answer 1

我第二个@TomShanley答案，但是您不应该使用enter .data[[data]]因为您没有使用数据本身。 相反，您应该只使用d3添加svg元素。 稍后，您可以根据需要添加数据以创建圆。

您也不应在<g>或其他<svg>包含<svg>元素

这是更新的小提琴： https : //jsfiddle.net/mghays6a/1/

Answer 2

您用于圆的输入选择基于使用.data([data])的行的追加。 尽管这对于线/路径是可以的（因为您需要一个元素），但是当您希望每个基准面有单独的元素时，这将不起作用。

您应该执行单独的selectAll("circle").data(data).enter()...etc ，其中数据不在方括号中。 这将为您提供每个圆圈单独的元素。