Browser tooltip not working in d3.js bar chart

Question

when i add a browser tooltip using append(title) function it shows undefined is not an function what is the reason. if i remove that it works fine.y source code is below. But when i saw some examples in net,they did the same one,but for me it is not working.Am i missed anything?

 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

What happens is that you cannot perform the

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

after the transition has started with

.transition()
.duration(1000)

The reason is that the object returned by the chained .transition() operation does not have the method .append(). What you want to do instead is to save the object where you later want to do a transition to a variable. Then perform the .append(), then to the transition.

See this Jsfiddle: http://jsfiddle.net/willeeklund/Sfz97/6/

Note that I also first set values to the y and height values of the bars, to make the transition/animation prettier.

Best of luck! /Wille