D3 JS - マウスの各要素のデータを表示する方法

Question

D3を使用して棒グラフを作成しています。

私はmouseoverで各要素を強調表示していますが、私はその要素を参照するデータをコンソールログに記録したいと考えています（たとえば、グラフのその要素の露出と年は何ですか）。

私はforループを使用しようとしましたが、これまでのところ運はありません。

JS：

var data = [ 
    {year: 2006, exposure: 2}, 
    {year: 2007, exposure: 3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 3.1}, 
    {year: 2011, exposure: 4.3}, 
    {year: 2012, exposure: 3.2}, 
    {year: 2006, exposure: 2.7}, 
    {year: 2007, exposure: 3.3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 2.1}, 
    {year: 2011, exposure: 1.3}, 
    {year: 2012, exposure: 2.2}, 
    {year: 2006, exposure: 2.4}, 
    {year: 2007, exposure: 3.1}, 
    {year: 2008, exposure: 1.2}, 
    {year: 2009, exposure: 0.8}, 
    {year: 2010, exposure: 0.5}, 
    {year: 2011, exposure: 2.3}, 
    {year: 2012, exposure: 1.2}, 
    {year: 2011, exposure: 4.3}, 
    {year: 2012, exposure: 3.2}, 
    {year: 2006, exposure: 2.7}, 
    {year: 2007, exposure: 3.3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 2.1}, 
    {year: 2011, exposure: 1.3}, 
    {year: 2012, exposure: 2.2}, 
    {year: 2006, exposure: 2.4}, 
    {year: 2007, exposure: 3.1}, 
    {year: 2008, exposure: 1.2}, 
    {year: 2009, exposure: 0.8}, 
    {year: 2010, exposure: 0.5}, 
    {year: 2011, exposure: 2.3}, 
    {year: 2012, exposure: 1.2}, 
    {year: 2011, exposure: 4.3}, 
    {year: 2012, exposure: 3.2}, 
    {year: 2006, exposure: 2.7}, 
    {year: 2007, exposure: 3.3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 2.1}, 
    {year: 2011, exposure: 1.3}, 
    {year: 2012, exposure: 2.2}, 
    {year: 2006, exposure: 2.4}, 
    {year: 2007, exposure: 3.1}, 
    {year: 2008, exposure: 1.2}, 
    {year: 2009, exposure: 0.8}, 
    {year: 2010, exposure: 0.5}, 
    {year: 2011, exposure: 2.3}, 
    {year: 2012, exposure: 1.2}, 
    {year: 2007, exposure: 3.3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 2.1}, 
    {year: 2011, exposure: 1.3}, 
    {year: 2012, exposure: 2.2}, 
    {year: 2006, exposure: 2.4}, 
    {year: 2007, exposure: 3.1}, 
    {year: 2008, exposure: 1.2}, 
    {year: 2009, exposure: 0.8}, 
    {year: 2010, exposure: 0.5}, 
    {year: 2011, exposure: 2.3}, 
    {year: 2012, exposure: 1.2}, 
    {year: 2011, exposure: 4.3}, 
    {year: 2012, exposure: 3.2}, 
    {year: 2006, exposure: 2.7}, 
    {year: 2007, exposure: 3.3}, 
    {year: 2008, exposure: 4.2}, 
    {year: 2009, exposure: 2.8}, 
    {year: 2010, exposure: 2.1}, 
]; 

    var barWidth = 5; 
    var width = (barWidth + 2) * data.length; 
    var height = 200; 

    var x = d3.scale.linear().domain([0, data.length]).range([0, width]); 
    var y = d3.scale.linear().domain([0, d3.max(data, function(datum) 
    {return datum.exposure;})]).rangeRound([0, height]); 

    // add the canvas to the DOM 

    var barBasic = d3.select("#bar-chart"). 
    append("svg:svg"). 
    attr("width", width). 
    attr("height", height); 

    barBasic.selectAll("rect"). 
    data(data). 
    enter(). 
    append("svg:rect"). 
    attr("x", function(datum, index) { return x(index); }). 
    attr("y", function(datum) { return height - y(datum.exposure); }). 
    attr("height", function(datum) { return y(datum.exposure); }). 
    attr("width", barWidth). 
    attr("fill", "purple") 
    .on("mouseover", function() { 
     d3.select(this).classed("highlight", true); 
      // code to optimize to get data from object relevant to current highlighted bar 
      // 
      data.forEach(function (value) 
      { 
       var year = value.year, 
        exposure = value.exposure; 
      console.log(exposure); 
      }); 
    }) 
    .on("mouseout", function() { 
     d3.select(this).classed("highlight", false); 
    }); 

HTML：あなたのmouseover機能で

<div id="bar-chart"></div> 

Answer 1

、データはその特定の要素を参照取得するパラメータdを使用します。

.on("mouseover", function(d) { 
    console.log("year is:" + d.year + " and exposure is: " + d.exposure) 
} 

ここにあります更新されたフィドル：https://jsfiddle.net/gerardofurtado/nt1c2u6z/