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__;
            
	      //var pDateRecord = duplicateDataForLineChart[0].DateRecord;
          return d.DateRecord.toString();
        }
    });

但是当我运行代码时，它不显示工具提示，并且它也显示为“ undefined ”作为控制台语句。我该如何解决这个问题？（这里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) {
		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();
        }
    });
    
   
     
}

谢谢。

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

希望这有帮助！

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

1 个答案: