1

私は D3 と部分的に SVG をまったく知らないので、いくつかの基本的な質問を受けました。まず、問題のコードはhttp://dotnetcarpenter.github.io/d3-test/で表示できます。D3.jsを使用したシンプルな円グラフの例とPie Chart Update 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) しかし、Firefox で「Unexpected value translate(NaN,NaN) parsing transform attribute.」という警告が表示され、ラベルが重ねて表示されます。

助けやヒントをいただければ幸いです。ありがとう！

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 を計算に役立てたい場合は、セントロイドに内半径と外半径、そして最も重要なこととして、開始角度と終了角度を伝える必要があります。後者は私のコードにありませんでした。これらの値を取得するのは、上記のパイ レイアウトをデータセットで呼び出してからtransformを実行するのと同じくらい簡単です。 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) + ")";
                                 });

途中で私を助けてくれたフィリップ・ペドルコに感謝しなければなりません。

ボーナス情報

transform/translateではなく、SVG クロス ブラウザーを配置する場合は、viewBoxを使用します。

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