D3.js水平折线图无法正确显示工具提示

D3.js horizontal line chart does not show tool tip properly

本文关键字：显示 工具提示 js 水平 折线图 D3      更新时间：2023-09-26

我正在尝试使用 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__;
            
	      //var pDateRecord = duplicateDataForLineChart[0].DateRecord;
          return d.DateRecord.toString();
        }
    });

但是当我运行代码时，它不会显示工具提示，并且它显示为">未定义"作为控制台语句。如何解决此问题？(这里复制数据线图是一个数组，我检查了它，它有数据。

这是我用来制作数据点的代码。

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) {
		line_dataCirclesGroup = line_svg.append('svg:g');
	}
	var line_circles = line_dataCirclesGroup.selectAll('.data-point').data(duplicateDataForLineChart);
		//.data(data);
    //line_svg.selectAll(line_circles).remove();
    
	line_circles
		.enter()
			.append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6)
                .style('stroke','#000000');
    
    line_circles
		.attr('cx', function(d) { return line_x(d.Date); })
		.attr('cy', function(d) { return line_y(d.Value); })
		.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";
                               } 
                })
		.transition()
		.duration(line_transitionDuration)
		.style('opacity', 1);
	line_circles
		.exit()
			.transition()
			.duration(line_transitionDuration)
				// Leave the cx transition off. Allowing the points to fall where they lie is best.
				//.attr('cx', function(d, i) { return line_xAxis(i) })
				.attr('cy', function() { return line_y(0) })
				.style("opacity", 1e-6)
				.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__;
            
	      //var pDateRecord = duplicateDataForLineChart[0].DateRecord;
          return d.DateRecord.toString();
        }
    });
    
   
     
}

谢谢。

我的直觉是，这是因为您错误地选择了与节点关联的数据：

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

希望这有帮助！

相关文章：