Диаграмма горизонтальной линии D3.js не отображает верхушку инструмента

Question

Я пытаюсь добавить подсказку для точки данных, которая находится на горизонтальной линейной диаграмме, используя D3.js. Для этого я использовал следующий сегмент кода.

$('svg circle').tipsy({ 
 
     gravity: 's', // nw | n | ne | w | e | sw | s | se --> http://onehackoranother.com/projects/jquery/tipsy/ 
 
     html: true, 
 
     title: function(d) { 
 
      console.log(this.__duplicateDataForLineChart__);  
 
      var d = this.__duplicateDataForLineChart__; 
 
      
 
\t  //var pDateRecord = duplicateDataForLineChart[0].DateRecord; 
 
      return d.DateRecord.toString(); 
 
     } 
 
    });

Но когда я запускаю код его дозы не показывать кончик инструмента, а также он показывает, как «неопределенных» в консольном заявлении. Как я могу исправить эту проблему? (Здесь duplicateDataForLineChart - это массив, и я проверил его, у него есть данные.)

Вот код, который я использовал для создания точек данных.

function updateLineChart(index,subIndex){ 
 
    //svg.selectAll(".TestSuite").remove(); 
 
    
 
    var totalSubRoots = 0; 
 
    for(var counter_a=0 ; counter_a<index ; counter_a++){ 
 
     totalSubRoots = totalSubRoots+ subRootCountHolder[counter_a]; 
 
    } 
 
    
 
    totalSubRoots = totalSubRoots+subIndex; 
 
    
 
    for(var counut2 = 0 ; counut2<totalSubRoots ; counut2++){ 
 
     duplicateDataForLineChart[counut2] = OriginalDataForLineChart[counut2]; 
 
    } 
 
    
 
    //alert(duplicateDataForLineChart[duplicateDataForLineChart.length-1].DateRecord); 
 
    if (!line_dataCirclesGroup) { 
 
\t \t line_dataCirclesGroup = line_svg.append('svg:g'); 
 
\t } 
 

 
\t var line_circles = line_dataCirclesGroup.selectAll('.data-point').data(duplicateDataForLineChart); 
 
\t \t //.data(data); 
 

 
    //line_svg.selectAll(line_circles).remove(); 
 
    
 
\t line_circles 
 
\t \t .enter() 
 
\t \t \t .append('svg:circle') 
 
\t \t \t \t .attr('class', 'data-point') 
 
\t \t \t \t .style('opacity', 1e-6) 
 
       .style('stroke','#000000'); 
 
    
 
    line_circles 
 
\t \t .attr('cx', function(d) { return line_x(d.Date); }) 
 
\t \t .attr('cy', function(d) { return line_y(d.Value); }) 
 
\t \t .attr('r', function() { return (duplicateDataForLineChart.length <= line_maxDataPointsForDots) ? line_pointRadius : 0 }) 
 
     .style('fill', function(d){ 
 
          if(d.TrueFalseVale == 'True'){ //"#4169E1", "#800080" 
 
            
 
           return "#4169E1";} 
 
          else{ 
 
           return "#800080"; 
 
           } 
 
       }) 
 
\t \t .transition() 
 
\t \t .duration(line_transitionDuration) 
 
\t \t .style('opacity', 1); 
 

 
\t line_circles 
 
\t \t .exit() 
 
\t \t \t .transition() 
 
\t \t \t .duration(line_transitionDuration) 
 
\t \t \t \t // Leave the cx transition off. Allowing the points to fall where they lie is best. 
 
\t \t \t \t //.attr('cx', function(d, i) { return line_xAxis(i) }) 
 
\t \t \t \t .attr('cy', function() { return line_y(0) }) 
 
\t \t \t \t .style("opacity", 1e-6) 
 
\t \t \t \t .remove(); 
 

 
    $('svg circle').tipsy({ 
 
     gravity: 's', // nw | n | ne | w | e | sw | s | se --> http://onehackoranother.com/projects/jquery/tipsy/ 
 
     html: true, 
 
     title: function(d) { 
 
      console.log(d);  
 
      var d = this.__duplicateDataForLineChart__; 
 
      
 
\t  //var pDateRecord = duplicateDataForLineChart[0].DateRecord; 
 
      return d.DateRecord.toString(); 
 
     } 
 
    }); 
 
    
 
    
 
     
 
}

Спасибо.

Answer 1

Моего шестое чувство, что это происходит потому, что вы выбираете данные, связанные с неправильным узлом:

title: function(d) { 
      console.log(d);  
      console.log(this.__duplicateDataForLineChart__);  


      var d = this.__duplicateDataForLineChart__; 

      //var pDateRecord = duplicateDataForLineChart[0].DateRecord; 
      return d.DateRecord.toString(); 
    } 

Вместо этого сделать, как показано ниже:

$('svg circle').tipsy({ 
     gravity: 's', // nw | n | ne | w | e | sw | s | se --> http://onehackoranother.com/projects/jquery/tipsy/ 
     html: true, 
     title: function(d) { 
      //this is how you get data from the circle 
      //post discussion came to know d3.select(this).data() is an array 

      return d3.select(this).data()[0].DateRecord; 
     } 
    }); 

Надеется, что это помогает!