D3動的線グラフにドットを追加

Question

データが入ってくるとリアルタイムで更新されるスクロール線グラフがあります。折れ線グラフのjsフィドルです。 https://jsfiddle.net/eLu98a6L/

私がしたいのは、ドットグラフで線を置き換えることで、ドットが作成され、スクロール機能が維持されます。dow jones dot graph最終的に私はその下の線を取り除きたいと思っています。

これは私がグラフにドットを追加しようとしているコードです。

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

これまでのところ、私は何の成功も見せていません。私はd3にはとても新しいので、どんな助けにも感謝しています。ありがとう！あなたのコードに基づいて

Answer 1

は、このためのアプローチをすることができます：

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

が行動でそれを参照してください：https://codepen.io/FaridNaderi/pen/weERBj

はそれが役に立てば幸い:)

素晴らしいことだ