CODEWITHSUNDEEP
javascriptd3.js
FrontEnd Expert
FrontEnd Expert

Reputation: 5813

'Circle' is not coming for line in D3 Chart

I have a 4 values what I am drawing in the d3 chart, for first value I am not getting circle but for rest of the values It's displaying the circle perfectly.

Can someone point one what is the problem ? Thanks.

Code sandbox here

Code snippet -

  g.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return xScale(d.startTime);
      })
      .attr("cy", function(d) {
        return yScale(d.magnitude);
      })
      .attr("r", function(d) {
        return 5;
      })
      .on("click", function(d) {
        alert("on click" + d.magnitude);
      })
      .attr("class", "circle");

enter image description here

Upvotes: 1

Views: 44

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

You already have a circle in your legend. Therefore, when you do...

g.selectAll("circle")

... you are selecting that circle and appending a data point to it.

The solution is selecting nothing:

g.selectAll(null)

Or, if you plan to have an update selection, select by class:

g.selectAll(".foo")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "foo)
  //etc...

Here is the result: https://codesandbox.io/s/pedantic-joliot-golgz?fontsize=14

Upvotes: 1

Related Questions