title: How to place Circles(dots) in line chart using "d3.js " library?
body: <p>I want to make a line chart using d3.js in which I want to put circle at the data's position. But circle are placed in wrong position in line chart. How can I resolve this ?</p>
  
  <p>I am working in Angular.
  Basic data set looks like </p>
  
  <pre><code>{
            type: 'Advanced',
            wcpm: 40,
            date: '11-25-2019',
            comment: [
              'Lorem Ipsum Lorem Ipsum Lorem 1',
              'Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 2'
            ]
   }
  </code></pre>
  
  <p>Output Image Link: 
  <a href="https://ibb.co/pwRdXjx" rel="nofollow noreferrer">https://ibb.co/pwRdXjx</a></p>
  
  <p>in which first circle should be placed on Jan25 but it is placed at the wrong position.</p>
  
  <pre><code>class AppComponent implements OnInit {
   title = 'chart';
   margin = { top: 50, right: 50, bottom: 50, left: 50 };
   width = 1200 - this.margin.left - this.margin.right;
   height = 700 - this.margin.top - this.margin.bottom;
   svg: any;
   xScale: any;
   yScale: any;
   line: any;
   toolTipDiv: any;
  ngOnInit() {
  
  // XAXIS
  this.xScale = d3.scaleBand()
    .domain(this.dataset[0].fluencyData.map((data) =&gt; {
      return new Date(data.date);
    }))
    .range([0, this.width]);
  
  // YAXIS
  this.yScale = d3.scaleLinear()
    .domain([0, 110])
    .range([this.height, 0]);
  
  // Line Generator
  this.line = d3.line()
    .x((d) =&gt; this.xScale(new Date(d.date)))
    .y((d) =&gt; this.yScale(d.wcpm));
  // .curve(d3.curveMonotoneX);
  
  // Add SVG to Div
  this.svg = d3.select('#displayChart').append('svg')
    .attr('width', this.width + this.margin.left + this.margin.right)
    .attr('height', this.height + this.margin.top + this.margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
  
  // Define the div for the tooltip
  this.toolTipDiv = d3.select('#displayChart').append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0);
  
  // Append XAXIS to the SVG
  this.svg.append('g')
    .attr('class', 'xAxis')
    .attr('transform', 'translate(0,' + this.height + ')')
    .call(d3.axisBottom(this.xScale).tickSizeOuter(0).tickFormat(d3.timeFormat('%b %d')));
  
  // Append YAXIS to SVG
  this.svg.append('g')
    .attr('class', 'yAxis')
    .call(d3.axisLeft(this.yScale).tickSize(-this.width)
    );
  
  // Make a Path for Dataset
  this.svg.append('path')
    .datum(this.dataset[0].fluencyData)
    .attr('class', 'line')
    .attr('d', this.line);
  
  // Text Heading of DATE in chart
  this.svg.append('text')
    .attr('transform', 'translate(' + (-20) + ',' + (this.height + 13) + ')')
    .attr('dy', '.35em')
    .attr('class', ' xAxis')
    .text('Date');
  
  // Append Circles in chart with different Colors
  this.appendCircles();
  }
  
  appendCircles() {
    this.svg.selectAll('.developing')
    .data(this.dataset[0].fluencyData)
    .enter().append('circle')
    .attr('class', (d) =&gt; d.type)
    .attr('cx', (d) =&gt; this.xScale(new Date(d.date)))
    .attr('cy', (d) =&gt; this.yScale(d.wcpm))
    .attr('r', 5)
    .on('mouseover', (d) =&gt; {
      this.toolTipDiv.transition()
        .duration(200)
        .style('opacity', .9);
      this.toolTipDiv.html(d.wcpm + '&lt;br/&gt;' + d.type + '&lt;br/&gt;' + d.date)
        .style('left', (d3.event.pageX - 50) + 'px')
        .style('top', (d3.event.pageY - 50) + 'px');
    })
    .on('mouseout', () =&gt; {
      this.toolTipDiv.transition()
        .duration(500)
        .style('opacity', 0);
    });
  }
  }
  </code></pre>