2

データ (スライス) を常に更新し、ラベルを変更する d3.js にパイを設定しようとしています。データのスライスは異なる場合があり、一定ではありません (2 スライスの円と 5 スライスなど)。

次のようないくつかの例を確認しました。

http://jsfiddle.net/emepyc/VYud2/3/

http://bl.ocks.org/mbostock/3808218

しかし問題は、テキスト ラベルとパスの両方を使用しているため、私の実装はかなり異なっているということです。

問題: データが更新されず、テキストが削除されません。

ここに私のコードがあります: http://jsfiddle.net/Kitt0s/vfkSs/

function tests (data) {
        data = data ? data : { "slice1": Math.floor((Math.random()*10)+1), "slice2": Math.floor((Math.random()*10)+1), "slice3": Math.floor((Math.random()*10)+1), "slice4": Math.floor((Math.random()*10)+1) };
            var dataa = d3.entries(data);
            var cv_path = cv_svg.selectAll("g.slice")
                .data(cv_pie(dataa));

            cv_path.enter()
                .append("g")
                .attr("class", "slice")
                .append("path")
                .attr("fill", function(d, i) { return cv_color(i); } ) 
                .attr("d", cv_arc)
                .each(function(d) { this._current = d; });

            cv_path.transition().duration(750).attrTween("d", cv_arcTween);

            cv_path.exit().remove();

            var cv_text = d3.selectAll(".slice")
                .append("text")
                .attr("transform", function(d) {
                    d.innerRadius = 0;
                    d.outerRadius = cv_r;
                    return "translate(" + cv_arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .attr("font-weight", "bold")
                .attr("fill", "#FFFFFF")
                .attr("font-size", "30px")
                .text(function(d) { return d.data.key + "(" + d.data.value + ")"; });

                cv_text.exit().remove();
}

私はこれを正しく行うために非常に多くの時間を費やしましたが、それでも行き詰まっているようです (何か他のものが壊れるたびに.. :P) あなたの助けは大歓迎です!

4

1 に答える 1

4

あなたはほとんどそこにいました。重要なのは、テキストをパスとまったく同じように扱い、.exit()それを削除して選択を処理することです。ここでjsfiddle を変更しました。g分かりやすくするために、要素を削除しました。

于 2013-06-20T21:30:02.303 に答える