D3在动态折线图中添加点

Question

I have a scrolling line chart that is being updated in realtime as data comes in. Here is the js fiddle for the line chart. https://jsfiddle.net/eLu98a6L/

What I would like to do is replace the line with a dot graph, so each point that comes in would create a dot, and the scrolling feature is maintained.This is the type of chart I would like to create dow jones dot graph and ultimately I would like to remove the line underneath.

This is the code I have used to try and add dots to my graph.

g.append("g")
.selectAll("dot")
.data(4)
.enter("circle")
.attr("cx", "2")
.attr("cy", "2");

So far I haven't had any success. I'm very new to d3, so any help is appreciated. Thanks!

Answer 1

Based on your code an approach for this can be :

var circleArea = g.append('g'); /* added this to hold all dots in a group */
function tick() {

  // Push a new data point onto the back.
  data.push(random());
  // Redraw the line.

  /* hide the line as you don't need it any more 
  d3.select(this)
      .attr("d", line)
      .attr("transform", null);
  */

  circleArea.selectAll('circle').remove(); // this makes sure your out of box dots will be remove.

  /* this add dots based on data */
  circleArea.selectAll('circle')
    .data(data)
    .enter()
         .append('circle')
         .attr('r',3)  // radius of dots 
         .attr('fill','black') // color of dots
         .attr('transform',function(d,i){ return 'translate('+x(i)+','+y(d)+')';}); 

  /* here we can animate dots to translate to left for 500ms */
  circleArea.selectAll('circle').transition().duration(500)
    .ease(d3.easeLinear)
    .attr('transform',function(d,i){ 
         if(x(i )<=0) {   // this makes sure dots are remove on x=0
              d3.select(this).remove();
         }
         return 'translate('+x(i-1)+','+y(d)+')';
    }); 

   /* here is rest of your code */ 
  // Slide it to the left.
  d3.active(this)
      .attr("transform", "translate(" + x(-1) + ",0)")
      .transition()
      .on("start", tick);
  // Pop the old data point off the front.
  data.shift();
}

See it in action : https://codepen.io/FaridNaderi/pen/weERBj

hope it helps :)