浏览器工具提示在d3.js条形图中不起作用

Question

当我使用append(title)函数添加浏览器工具提示时，它显示未定义不是一个函数，原因是什么?如果我把它去掉，它就能正常工作。Y源代码如下。但是当我在网上看到一些例子时，他们做了同样的事情，但对我来说它不起作用。我错过什么了吗?

 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

实际情况是，您无法执行

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

在

开始转换之后

.transition()
.duration(1000)

原因是链式.transition()操作返回的对象没有.append()方法。您需要做的是将对象保存在以后想要转换为变量的位置。然后执行.append()，然后进行过渡。

查看此jsp: http://jsfiddle.net/willeeklund/Sfz97/6/

注意，我也首先设置值为y和height值的条形，使过渡/动画更漂亮。

祝你好运!/威利