D3饼图文/动画

我现在有一个内置的D3.js饼图看起来像这样，但具有不同的数据D3饼图文/动画

的数据与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的结束，因为我没有足够高的声誉

我仍然在寻找一种方式来显示在中央的文字，和圆弧动画

来源

2013-06-12 TFischer

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

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

更新上的圆形切片鼠标悬停元素：

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

及移出：

 centerText.text("");

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

来源

2013-06-12 16:02:50

这很好用！谢谢！这里是JSFiddle：http://jsfiddle.net/bnKgd/3/。你知道如何在内径上添加弧吗？这是我仍然需要的唯一东西 – TFischer

但是，如何更改字体属性（例如，粗体，字体系列，字体重量，字体大小等），这是一个问题。我尝试过改变CSS中的'.slice text {}'，并将'.style（“font-family”，“Segoe UI”）;'添加到您展示的行中。 – TFischer

当创建centerText并使用.centerText {font-size：200％;}时，我会添加.attr（“class”，“centerText”）。 ect;}在css –

D3饼图文/动画

回答

相关问题