1

私はD3を初めて使用しますが、解決できないと思われる問題に遭遇しました。

このチュートリアルを使用してアニメーションの折れ線グラフを作成し、これに追加しようとしています。私がクールなアイデアだと思ったのは、折れ線グラフの各線にラベルを付けることですが、線の終わりにラベルを付けることです。

これが私がこれまでに思いついたものです：

ここに画像の説明を入力してください

あなたが見ることができるように、せいぜいその準最適です。私はテキストを間違って配置していますが、明らかではないのは、テキストを正しい方法で配置する方法です。これが問題のコードです。

name.transition()
    .duration(duration)
    .ease("linear")
    .attr("transform", function(d) { 
      return "translate(" + (width - margin.left - margin.right) +", " + y(d[n-2]) + ")";
    });

「線形」イージングがオフになっているようで、時々異なるスケールを使用しているようです。

これを行う正しい方法を教えてくれるD3エキスパート（または初心者）はいますか？

4

1 に答える 1

1

ここには2つの問題があるようです。

  1. .interpolate("basis")-タイトルには線形補間を使用していますが、パスにはBスプライン補間を使用しています。この行をコメントアウトすると、タイトルがデータ行とかなりタイトに保たれます（ただし、行の平滑化も解除されます。ほとんどのデータグラフにとってはおそらく良いことです）。

  2. 軸の目盛りが変わると「ジャンプ」します。これは、タイトルが新しいスケールの新しい位置に移行しているが、開始位置が古いスケールを基準にして設定されているため、追跡している線の上または下から開始する可能性があるためです。.attrタイトルの初期位置を修正するために、トランジションを開始する前に直接設定を追加することで、これを修正できると思います。

    name
    .attr("transform", function(d) {
       return "translate(" +
           (width - margin.left - margin.right) +", " + y(d[n-2]) + ")"
    })
    .transition()
    // etc

http://jsbin.com/uvayof/2を参照してください

于 2013-03-08T00:56:55.517 に答える