javascript - How to add circles onto line chart path d3.js - Stack Overflow

admin管理员组

文章数量:1400211

Here is my chart;

I'm trying to add a circle on each data point along the line path, but can't seem to find a way to do it.

Here is the code I'm using to draw the circles/line for the graph;

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

Any help/advice is much appreciated!

Thanks

Here is my chart;

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

I'm trying to add a circle on each data point along the line path, but can't seem to find a way to do it.

Here is the code I'm using to draw the circles/line for the graph;

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

Any help/advice is much appreciated!

Thanks

• javascript
• d3.js

Share Improve this question Follow edited Aug 3, 2016 at 15:32 Tim B 1,98311 gold badge2121 silver badges2121 bronze badges asked Aug 3, 2016 at 15:21 alexcalexc 1,32022 gold badges1818 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Change

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

to

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

Because you want each point to be treated as separate item

See http://plnkr.co/edit/NCQyDtykbxjlvK687WIu?p=preview

本文标签： javascriptHow to add circles onto line chart path d3jsStack Overflow