當鼠標懸停在數據更新上時，D3圓形元素仍然保留

我有一個由時間線路徑組成的D3時間序列圖表，並且在每個數據點上我使用了一個附加到行上的圓。圓圈有一個鼠標輸入事件附加到它，當鼠標移動到圓上它顯示工具提示與關於該數據點的信息，我也改變圓的類，使它看起來突出顯示。當鼠標懸停在數據更新上時，D3圓形元素仍然保留

我得到的問題是，當鼠標在圓圈上，並且圓圈突出顯示並且工具提示顯示時，同時如果我得到一些新的數據並更新圖表，我的鼠標圓是即使將鼠標從圓圈中移除，它也不會消失，並且它顯示出掛在中間的圓圈不會附着到任何線條上。我附上顯示問題的圖表圖像。

任何幫助解決這個問題將不勝感激。

Image showing d3 issue

這裏的顯示問題jsfiddle代碼。試試你的鼠標指向圈，等待該圖表以每5秒

來源

2017-04-20 Murtuza Daginawala

您必須向我們展示一些代碼，以便我們可以嘗試診斷它。 – Adam

下面是jsfiddle上顯示問題的示例代碼。嘗試將鼠標指向一個圓圈並等待數據刷新。 https://jsfiddle.net/zg4dhd2g/34/ –

看看這個：https：//jsfiddle.net/xvLgq8mn/問題是，在你設置'mousemove'的drawCircles中，你修改了class從「circle all」到「circle - highlight」的圓圈，因此當你更新圖表並且執行：'svg.selectAll（'。circle'）'時，你會突出顯示突出顯示的部分。 – mkaran

（從註釋部分移動本）

更新看看這個：https://jsfiddle.net/xvLgq8mn/

在您選擇的updateChart功能由circle類：

// update the circles at each data points 
svg.selectAll('.circle') // here you correctly select all with the circle class 
     .data(this.props.data) 
     .attr('class', 'circle all') 
     .transition() 
     .duration(500) 
     .attr('cx', (d) => { return this.axis.x(d.time);}) 
     .attr('cy', (d) => { return this.axis.y(d.count);});

但在這裏，鼠標懸停，你circle--highlight刪除circle類和替換：

group.selectAll() 
    .data(this.props.data) 
    .enter().append('circle') 
      .attr('class', 'circle all') 
      .attr('cx', (d) => { return this.axis.x(d.time);}) 
      .attr('cy', (d) => { return this.axis.y(d.count);}) 
      .attr('r', 4) 
      .on('mousemove', function(d) { 
       // START: Show tooltip 
       div.transition() 
       .duration(1000) 
       .style('opacity', 1); 

       div.html('<div class="date--time">' 
       + d.time 
       + '</div><div class="count">' + d.count + ' incidents</div>') 
       .style('left', (d3.event.pageX) + 'px') 
       .style('top', (d3.event.pageY - 70) + 'px'); 

       d3.select(this) 
       .attr('r', 6) 
       .attr('class', 'circle--highlight'); // here you change the class from circle all 
       // to just circle--highlight, 
       // so when you are hovering a circle and the chart changes, 
       // the circle you have hovered won't be updated because 
       // it won't be selected due to the class difference 

       // END: Show tooltip 
      }) 
      .on('mouseleave', function() { 
       // hide tooltip and return the circles to original style 
       div.transition() 
       .duration(500) 
       .style('opacity', 0); 

       // set the circle back to normal 
       d3.select(this) 
       .attr('r', 4) 
       .attr('class', 'circle all'); 
      });

因此，一個解決辦法是也與circle--highlight這樣一起添加circle類：

d3.select(this) 
       .attr('r', 6) 
       .attr('class', 'circle circle--highlight');

或更改您的選擇在updateChart這樣的：

svg.selectAll('circle')

但需要對腳本進行更多的調整才能使其按預期工作。

希望這會有所幫助！祝你好運！

來源

2017-04-22 09:01:45 mkaran

當鼠標懸停在數據更新上時，D3圓形元素仍然保留

回答

相關問題