10

nvd3.jsを使用して、時間の経過とともに計算した評価を表示する折れ線グラフを作成しています。個々のデータポイント（評価）に関する詳細情報があり、グラフ上の各データポイントを、その特定のデータポイントに関する詳細情報を含む一意のページにリンクさせたいと考えています。

例：グラフの最初のデータポイント（x：1345457533、y：-0.0126262626263）にカーソルを合わせ、それをクリックして特定のページ（http://www.example.com/）に移動できるようにします。 info？id = 1）は、その評価またはデータポイントに関する詳細情報を提供します。各データポイントには、リンクしたい一意のIDと一意のURLがあります。

グラフの生成に使用しているコードは次のとおりです。

nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time')
      .tickFormat(d3.format('r'));

  chart.yAxis
      .axisLabel('Rating')
      .tickFormat(d3.format('.2f'));

  d3.select('#chart svg')
      .datum(data())
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

function data() {
  var data = [ { x: 1345457533, y: -0.0126262626263 },
               { x: 1345457409, y: 0.0224089635854 },
               { x: 1345457288, y: 0.0270935960591 },
               { x: 1345457168, y: -0.0378151260504 },
               { x: 1345457046, y: -0.115789473684 } ]

  return [
    {
      values: data,
      key: "Sample1",
      color: "#232066"
    }
  ];
}

HTML：

<div id="chart">
  <svg></svg>
</div>

そして、これが実際の例です。

4

1 に答える 1

5

これが実用的なソリューションですhttp://jsfiddle.net/66hAj/7/

$('#chart svg').on('click', function(e){
    var elem = $(e.target),
        currentItem, currentUrl;

    if(elem.parent('.nv-point-paths').length) {
        currentItem = e.target.getAttribute('class').match(/\d+/)[0];
        currentUrl = _data[0].urls[ currentItem ];

        $('#log').text(currentUrl);
        //window.location = currentUrl
    }
})

jQueryを使用してキャンバス上のクリックハンドラーをバインドし、グラフでクリックされた要素に基づいてデータを取得しました。

currentItemクリックした現在のアイテムのIDを表示します

currentUrl現在クリックされているアイテムに関連するURLを示します。

グラフ上の各ポイントをクリックすると、グラフの下のdivでURLの変化を確認できます。

于 2012-10-17T08:03:08.800 に答える