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、チェーンで a を開始していることです。このオブジェクトは、 、 、など、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を に提供するセッター関数に渡し.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 に答える