Tootip не работает на гистограмме с d3.js

Question

Я использую d3.js, интегрирующийся с угловыми js. Но он не работает и получил ошибку при вызове tip.show и tip.hide.

var chart = d3.select(element[0]) 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

chart.call(tip); 

chart.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })  
    .attr("x", function(d) { return x(d.name); }) 
    .attr("y", height) 
    .attr("height", 0) 
    .transition().duration(2000) 
    .attr("y", function(d) {return y(Math.max(0, d.value)); }) 
    .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })  
    .attr("width", x.rangeBand()) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

Полный рабочий пример приведен в скрипку

http://jsfiddle.net/HB7LU/8984/

Answer 1

Вы связывании слушателей мыши на каждом переходе. Прислушание слушателей к выбору

chart.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })  
     .attr("x", function(d) { return x(d.name); }) 
     .attr("y", height) 
     .attr("height", 0) 
     .on('mouseover', tipX.show) //Moved up 
     .on('mouseout', tipX.hide) //Moved up 
     .transition().duration(2000) 
     .attr("y", function(d) {return y(Math.max(0, d.value)); }) 
     .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })  
     .attr("width", x.rangeBand()); 

Также обновите этот код, так как d является объектом здесь.

var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function(d) { 
      //Changed d to d.value 
      return "<strong>Frequency:</strong> <span style='color:red'>" + d.value + "</span>"; 
     }); 

Вот обновленный fiddle

Answer 2

Я думаю, что вы можете сделать DIV, чтобы сделать трюк. Я не уверен, что это хороший способ.

var div = d3.select('body').append('div') 
.attr('class', 'tooltip')    
.style('opacity', 0); 

fiddle