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

我怎样才能模仿这些动画？我想知道当用户将鼠标悬停在切片上时如何在中心添加文本/值。我还想知道如何添加弧线和调整大小动画。我在任何地方都没有找到任何类似的例子，所以一些帮助会很棒。

谢谢！

编辑：这是我取得的一些进展。将“/1/”添加到 JSFiddle URL 的末尾，因为我没有足够高的声誉

我仍在寻找一种在中心显示文本和弧形动画的方法

4

1 回答 1

3

对于标签，在创建它时将文本元素添加到饼图的中心：

var centerText = vis.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")

在饼图鼠标悬停时更新该元素：

      centerText.text( d3.select(this).datum().data.label );

和鼠标：

      centerText.text( "" );

有几种方法可以添加另一条弧线。我可能会在鼠标悬停时更改切片路径的笔划，但您也可以在鼠标悬停时绘制另一个内弧。

于 2013-06-12T16:02:50.103 回答