1

我有这个工作代码。其中d3部分基本上是：

var bar = chart.append("div").attr("class", "chart")
             .selectAll('div')
            .data(scope.data.sort().reverse()).enter().append("div")
             .transition().ease("elastic")
             .style("width", function(d) { return (d[0]/sum)*attrs.chartWidth + "px"; })//This is where I base the width as a precentage from the sum and calculate it according to the chart-width attribute
            .style("background-color",function(){i++;if (i<=colors.length-1){return colors[i-1]} else {return colors[(i-1)%colors.length]}}).text(function(d) { return d[1] ; })

但是当我尝试append("span")链接时，文本将在跨度上而不是在父 div 中。文本消失了，开发控制台没有显示跨度和文本的任何线索。还尝试insert("span")甚至更换了.textfor.html(function(d){return "<span>"+d[1]+"</span>"}

既不工作。

任何线索？谢谢！

4

1 回答 1

2

问题是你正在开始一个transition链。该transition对象提供了许多功能，就像普通的一样，d3.selection包括.remove,.text和.html，但不允许.append操作。

您应该重构代码以阅读：

    var bar = chart.append("div").attr("class", "chart")
        .selectAll('div')
        .data(scope.data.sort().reverse()).enter().append("div");

    bar
        .transition().ease("elastic")
        .style("width", function(d) { return (d[0]/sum)*attrs.chartWidth + "px"; })//This is where I base the width as a precentage from the sum and calculate it according to the chart-width attribute
        .style("background-color",function(){i++;if (i<=colors.length-1){return colors[i-1]} else {return colors[(i-1)%colors.length]}}) }) 

    bar.append('span')
       .text(function(d) { return d[1] });

Demo

附带说明一下，在选择 时background-color，您不需要自己维护索引变量，d3将数据d和索引传递i给您提供给的 setter 函数.style：

.style("background-color",
       function(d, i){  // <-- 'd' and 'i' are passed by d3
            if (i<=colors.length-1)
                 {return colors[i-1]} 
            else {return colors[(i-1)%colors.length]}}) 
 })
于 2013-11-10T15:05:29.690 回答