D3 JS - Wie Daten für jedes Element auf Maus über

Question

angezeigt werden

Ich baue ein Balkendiagramm mit D3.

Ich kann jedes Element bei mouseover hervorheben, aber ich möchte die Daten, die sich auf dieses Element beziehen, mit der Konsole protokollieren (z. B. was ist die Belichtung und das Jahr für dieses Element im Diagramm).

Ich habe versucht, eine for-Schleife zu verwenden, aber bisher kein Glück.

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:

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

Answer 1

In Ihrer mouseover Funktion, verwenden Sie den Parameter d die Daten zu diesem bestimmten Element Bezug zu bekommen:

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

Hier die aktualisierte Geige: https://jsfiddle.net/gerardofurtado/nt1c2u6z/