0

私は現在、このように見えるD3.jsに組み込まれた円グラフを持っていますが、データは異なります

http://jsfiddle.net/bnKgd/

データは JSON を使用して外部からロードされます。これが私のコードです

(function() {
    var w = 670,
    h = 326,
    r = 150,
    inner = 80,
    color = d3.scale.category20c();

    d3.json("script.php", function (data) {
        var vis = d3.select("#pieGraph")
            .append("svg:svg")
            .data([data])
                .attr("width", w)
                .attr("height", h)
            .append("svg:g")
                .attr("transform", "translate(" + r + "," + r + ")")

        var arc = d3.svg.arc()
            .innerRadius(inner)
            .outerRadius(r);

        var pie = d3.layout.pie()
            .value(function(d) { return d.value; });

        var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
               .append("svg:g")
               .attr("class", "slice")

        arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } )
            .attr("d", arc)
    })
})();

私のデータでは、一部のスライスが小さすぎてテキストを保持できません。これに遭遇したとき、情報を表示するためのオプションを見つけようとしています:

http://jsbin.com/ukaxod/144/embed?javascript,live

これらのアニメーションを模倣するにはどうすればよいですか? ユーザーがスライスにカーソルを合わせたときに、中央にテキスト/値を追加する方法を知りたいです。弧を追加する方法とアニメーションのサイズ変更も知りたいです。私はどこにも似たような例を見つけていないので、いくつかの助けが素晴らしいでしょう.

ありがとう！

編集：ここに私が行ったいくつかの進歩があります。十分な評判がないため、JSFiddle URL の末尾に「/1/」を追加します。

テキストを中央に表示する方法とアークアニメーションをまだ探しています

4

1 に答える 1