使用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个元素。稍后，您可以根据需要添加数据以创建圆圈。

<svg>或其他<g>

中也不应包含<svg>个元素

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

Answer 2

您用于圈子的输入选择基于使用selectAll("circle").data(data).enter()...etc的行的附加内容。虽然这对于行/路径是好的（因为您需要一个元素），但是当您需要每个数据的单独元素时，这将不起作用。

您应该单独执行#indice dd + dt { clear: both; }，其中数据不在方括号中。这将为每个圆圈提供单独的元素。