![](/img/trans.png)
[英]How to display rectangular div with data on mouse over event of any node in d3 js tree?
[英]D3 JS - How to display data for each element on mouse over
我正在使用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>
在mouseover
功能中,使用参数d
获取引用该特定元素的数据:
.on("mouseover", function(d) {
console.log("year is:" + d.year + " and exposure is: " + d.exposure)
}
这是更新的小提琴: https : //jsfiddle.net/gerardofurtado/nt1c2u6z/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.