1

から見た機能のマッシュアップを作りたい

http://bl.ocks.org/4063423およびhttp://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html

d3.js または少なくとも純粋な JavaScript ソリューションを使用したいのですが、マウスのクリックに応答して選択したセクションに関する詳細情報を表示するソリューションを使用したいと考えています。

ズームインとズームアウトは必須ではありませんが、達成できれば良いでしょう。

今私の質問は、これをサポートできるフレームワークはありますか、それとも自分でそれらをマッシュアップする必要がありますか.

免責事項: Google はそれほど役に立ちませんでした。

4

1 に答える 1

1

D3 だけで簡単に実行できます: http://bl.ocks.org/4678148任意の要素をクリックすると、その要素がフォーカスselectedされ、クラスが設定された状態で90 度に遷移します。

また、右上の凡例テキストが、選択した要素の名前に変わります。この結合を実現するコードの部分は次のとおりです。

d3.selectAll("path").on("click", function (d, i) {
  var newAngle = - (d.x + d.dx / 2);

  innerG
    .transition()
      .duration(1500)
      .attr("transform", "rotate(" + (180 / Math.PI * newAngle) + ")");

  // Set the class "selected" on the chosen element.
  path
    .classed("selected", function (x) { return d.name == x.name; });

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});

アップデート

クリックした要素が中央に遷移するようなズーム可能な動作については、 hereやhereとほぼ同じコードを使用できます。クリックされたアイテムに関する情報を抽出する方法を示すために、コードに小さな変更を加えました: http://bl.ocks.org/4747342

必要なコードの変更は、以前よりも簡単です。

d3.selectAll("path").on("click", function (d, i) {  

  // Zooming
  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d));

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});
于 2013-01-30T23:47:32.553 に答える