브라우저 툴팁이 d3.js 막 대형 차트에서 작동하지 않습니다

Question

append (title) 함수를 사용하여 브라우저 툴팁을 추가 할 때 정의되지 않음을 나타내는 함수는 이유가 아닌 함수입니다. 만약 내가 그것을 제거 괜찮아요. 소스 코드는 아래에 있습니다. 하지만 그물에서 몇 가지 예를 보았을 때, 그들은 똑같은 것을했지만, 저에게는 효과가 없습니다. 나는 무엇이든 놓친 것입니까?

dataset = [{"label":"Abc", "value":140}, 
{"label":"Bbc", "value":200}, 
      {"label":"Def", "value":90}, 
      {"label":"Ghi", "value":100}, 
      {"label":"jkl", "value":210}, 
      {"label":"Mno", "value":40}, 
      {"label":"Pqr", "value":170}] 
      ; 


var h = 400, 
    w = 700; 

// create svg element 
var chart = d3.select('body') 
       .append('svg') // parent svg element will contain the chart 
       .attr('width', w) 
       .attr('height', h);  

var barwidth = w/dataset.length; 
var spacing =1; 
var chartPadding = 50; 
var chartBottom = h - chartPadding; // 350 
var chartRight = w - chartPadding; // 750 


    //CHART CODE 

      chart.selectAll('rect') 
     .data(dataset) 
     .enter()   
     .append('rect') 

     .transition().duration(1000) 
     .attr(
      'x', function(d) { 
       return xScale(d.label); 
       // instead of return i * barwidth 
      }) 
      .attr('y', function(d) { 
       return yScale(d.value); 
       // instead of return h - d.value 
      }) 
      .attr('width', xScale.rangeBand()) 
      // gives bar width with space calculation built in 
      // instead of barwidth - spacing 
      .attr('height', function(d) { 
       return chartBottom-yScale(d.value); 
       // instead of return d.value 
      }) 
      .attr('fill', 'orange'); 




//CHART CODE OVER 







var y_axis = chart.append('g') 
      .attr('class','axis') 
      .attr('transform','translate(' + chartPadding + ',0)'); 

yAxis(y_axis); 

Answer 1

무슨 일 전환이

.transition() 
.duration(1000) 

시작 후 당신이

.append("svg:title") 
.text("hai"); 

을 수행 할 수 있다는 것입니다 이유 체인 된 .transition() 작업이 반환 한 개체가없는 것입니다 메소드 .append(). 대신 변수로 전환하려는 객체를 저장하는 것이 좋습니다. 그런 다음 .append()을 수행 한 다음 전환하십시오. 나는 또한 바의 y 및 height 값으로 첫번째 설정 값이 전환/애니메이션 예쁘게을 할 http://jsfiddle.net/willeeklund/Sfz97/6/

참고 :

이 Jsfiddle를 참조하십시오.

행운을 빈다. /Wille