1

我对 D3 和部分 SVG 完全不熟悉，所以我有一些基本问题。首先，我有问题的代码可以在http://dotnetcarpenter.github.io/d3-test/上查看，我使用了带有 D3.js和饼图更新的简单饼图示例，II作为示例来运行开始。

如您所见，当低路径值切换到较高值时，动画最终会倾斜。这显然不是我想要的。我想我的计算顺序是错误的，但我不知道该怎么做。我正在使用上一个示例中的代码：

function change() {
  //...
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// where arcTween is
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

另一个问题是在扇区上贴标签。我已将更新内容放在更改函数中，并且能够读出并仅在值介于 0 和 100 之间时才呈现它们。但是我不能以任何方式放置它们。看第一个例子，我想我可以做这样的事情：

text.data(data)
    .text(setText)
    .attr("transform", function (d) {
      // we have to make sure to set these before calling arc.centroid
      d.innerRadius = 0;
      d.outerRadius = radius;
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle") //center the text on it's origin

其中 text 是 d3 选择，arc 是：d3.svg.arc().outerRadius(radius) 但我得到“ Unexpected value translate(NaN,NaN) parsing transform attribute. ” Firefox 中的警告，并且标签彼此重叠。

我感谢任何帮助和提示。谢谢！

4

1 回答 1

3

我终于弄明白了。

在整个动画中保持扇区顺序。

你会认为对象保持与它有关是可以原谅的。我做到了。但事实证明它比这简单得多。

默认情况下，每个饼图都按值排序。如果您不想按值排序，而是按数据列表顺序，您只需禁用排序。

var pie = d3.layout.pie() // get a pie object structure
            .value(function(d) { // define how to get your data value
                return d.value;  // (based on your data set)
            })
            .sort(null); // disable sort-by-value

根据图表定位标签

基本上，您需要根据图表或图形的类型计算您的标签位置，您尝试将它们连接到。就我而言，它是一个饼图。所以如果我想让 d3 帮助计算，我需要告诉centroid内半径和外半径，最重要的是我的问题，start和end 角度。我的代码中缺少后者。获取这些值就像使用我们的数据集调用上面的饼图布局然后进行转换一样简单。 请注意，如果您使用 d3 创建了 SVG 并且已经提供了包装在结构中的数据，则无需再次调用。也就是说，您没有从页面中选择任何现有的 SVG。.data().pie()

var svg =  d3.select("svg")
             // do stuff with your svg
var pie = d3.layout.pie()
             // set stuff on your layout
var text = svg.selectAll("text")
              .data(pie(dataset)) // where dataset contains your data
              .attr("transform", function(d) {
                                     return "translate(" + arc.centroid(d) + ")";
                                 });

我必须感谢 Philip Pedruco 在此过程中对我的帮助。

奖金信息

如果您想定位您的 SVG 跨浏览器，请使用viewBox ，而不是transform/translate。

// move pie to center
d3.select("svg").attr("viewBox", -radius + ","+ -radius +"," + size + "," + size)
于 2013-08-30T17:10:11.753 回答