2016-11-24 7 views
1

enter image description hereDC.JS散布グラフの選択

こんにちは、私はdc.js.を使用しています

スクリーンショットに表示されているツールチップを構築するためのデータを取得する方法を理解できません。

イベントハンドラbrush.on( 'brushend.foo'、function(){})で選択した項目を取得するにはどうすればよいですか?

これは、ツールチップを描画するための私のハンドラである:

var brush = this.chart.brush(); 
    brush.on('brushend.foo', function() { 
     let selection = self.chart.select('.extent'); 


     let tooltipValues = { 
     maxProbability: '-', 
     minProbability: '-', 
     minImpact: '-', 
     maxImpact: '-', 
     } 
     selection.on('mousemove', function(){ 
     selection.on 
      div.transition() 
      .duration(200) 
      .style("opacity", 1); 

     div.html(
      ` 
      <div> Probability (percents) max: ${tooltipValues.maxProbability} <div> 
      <div> Probability (percents) min: ${tooltipValues.minProbability} <div> 
      <div> Impact max: ${tooltipValues.maxImpact} <div> 
      <div> Impact min ${tooltipValues.minImpact} <div> 
      ` 
     ) 
      .style("left", (event.pageX) + "px") 
      .style("top", (event.pageY - 28) + "px") 
      .style("class", "content") 

     }) 
     .on("mouseout", function(d) { 
      div.transition() 
       .duration(300) 
       .style("opacity", 0); 
     }); 
    }); 

答えて

1

d.probabilityはむしろチャートにドットを使用しようとするよりも、私は、データを取得するためにcrossfilterオブジェクトを使用すると思います。 (私たちのMVCにおけるモデルは結局、crossfilterです。)

ですから、現在でフィルタリングされているすべてのデータの生の行を取得するためにself.chart.dimension().top(Infinity)を使用することができます。異なりgroup.allからdimension.top作品はそれを観察しないという点であることに注意してくださいそれ自身のフィルター。それはあなたがここで欲しいものです。

縮小(グループ化)されたデータを扱う場合は、すべてのフィルタを監視するためにグループ&を別に作成する必要があります。

ここで注目すべき重要なことは、選択がブラシまたはチャートに特有ではないことです。散布図は既に他の図のフィルタを観察しており、散布図のブラシに興味があるので、クロスフィルタインスタンスの完全にフィルタ処理された行と同じ結果になります。

1

あなたはfuncionへの引数としてdを使用しています。あなたのデータがどのように見えるかによって、dは異なるプロパティを持ちます。例えばd.xd.y、またはd.impact

selection.on('mousemove', function(d){ 
    console.log('Hovering x at ' + d.x + ' and y at' + d.y); 
    console.log(d); 
}); 
+0

このオプションをチェックしました。 関数の引数を見ると、d == 0 が表示されます。[0,0,0] –

+0

おそらく選択がブラシで、選択されたデータポイントではないからです。 – Gordon