Question

我正在使用D3构建条形图。

我正在设法突出显示鼠标悬停时的每个元素，但我想在我执行时控制记录引用该元素的数据（例如图表中该元素的曝光和年份）。

我试过使用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：

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

Answer 1

在mouseover函数中，使用参数d获取引用该特定元素的数据：

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

这是更新的小提琴：https://jsfiddle.net/gerardofurtado/nt1c2u6z/

D3 JS - 如何在鼠标

1 个答案: