4

まず第一に、ここで私が受けた助けにコミュニティに感謝したいと思います.

私はここで例のカスタムバージョンを構築していますhttp://nvd3.org/ghpages/scatter.html

各円をクリック可能なリンクにする方法はありますか? 次に、リンクをクリックすると、サークルからモーダル ポップアップが表示されますか? モーダルの閉じるボタンで。

複雑に聞こえるかもしれませんが、その NVD3 ライブラリをナビゲートするのに苦労しているだけです。非推奨/放棄されていますか? それに関するドキュメントが見つかりません。Scott Murray のガイドを読みましたが、NVD3 ライブラリが大幅に変更されたようです。Scott Murray から読んだ内容のほとんどは、この例には当てはまりません。

私のサンプルページはここにありますhttp://goo.gl/pUKW9そして私が持っているコードは....

<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>
<script>
//Format A
var chart;

nv.addGraph(function() {
  chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.height(500)
                .useVoronoi(true)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))

  d3.select('#test1 svg')
      .datum(randomData(4,40))
    .transition().duration(500)
      .call(chart)


  nv.utils.windowResize(chart.update);

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});


function randomData(groups, points) { //# groups,# points per group
var data = [
{key: 'Weak Guidance', values: [
{x: 1, y: 1}
, {x: 2, y: 3}
, {x: 4, y: 9    }]},

{key: 'Strong Guidance', values: [
{x: 32, y: 0}
, {x: 3, y: 54}
, {x: 1, y: 8}  ]              }];

  return data;
}


</script>
4

1 に答える 1

5

nvd3 が要素にハンドラーをアタッチする機能を提供しているかどうかはわかりませんが (提供していないと思います)、「純粋な」d3 ではこれを非常に簡単に行うことができます。コードは次のようになります

svg.selectAll("circle").on("click", function(d, i) { ... });

ここsvgで、グラフのコンテナ要素への参照です。たとえば、特定のクラス ( selectAll("circle.myclass")) を追加するなど、セレクターをより具体的にする必要がある場合があります。

d3 も nvd3 も、モーダル ダイアログの機能を提供しません。ただし、 jQuery ダイアログのようなものは問題なく使用できるはずです。ダイアログを作成するコードは、イベント ハンドラー関数内に入ります。

于 2013-03-21T18:09:16.853 に答える