如何将圆圈添加到折线图路径d3.js

时间:2016-08-03 15:21:55

标签: javascript d3.js

这是我的图表;

http://plnkr.co/edit/Cej2NcyUWysAsKiMAEXj?p=preview

我试图在线路上的每个数据点上添加一个圆圈,但似乎无法找到方法。

以下是我用于绘制图表的圆圈/线条的代码;

  var selectLine = svg.selectAll(".line")
    .data([data])

  var selectCircle = svg.selectAll(".circle")
    .data([data])

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)

  selectLine.enter().append("path")
    .attr("class", "line")
    .attr("d", line);

  selectCircle.enter().append("circle")
    .attr("class", "circle")
    .attr("r", 3.5)
    .attr("cx", function(d) {
      return x(new Date(2016, moment(d.date, 'MMMM').format('M') - 1, 1))
    })
    .attr("cy", function(d) {
      return y(d.close)
    })

非常感谢任何帮助/建议!

由于

1 个答案:

答案 0 :(得分:4)

更改

var selectCircle = svg.selectAll(".circle")
.data([data])

var selectCircle = svg.selectAll(".circle")
.data(data)

因为您希望将每个点视为单独的项目

请参阅http://plnkr.co/edit/NCQyDtykbxjlvK687WIu?p=preview

相关问题