Question

当我使用append（title）函数添加浏览器工具提示时，它显示undefined不是函数是什么原因。如果我删除它工作正常。源代码如下。但是当我在网上看到一些例子时，他们做了同样的例子，但对我来说它不起作用。我错过了什么？

 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()，然后执行转换。

见这个Jsfiddle：http://jsfiddle.net/willeeklund/Sfz97/6/

请注意，我还首先将值设置为条形的y和height值，以使转换/动画更漂亮。

祝你好运！ /意志

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

1 个答案: