javascript - d3通过鼠标悬停事件传递数据
问题描述
我有一个图表,在鼠标悬停时为我提供了我正在寻找的数据
.on("mouseover", function(d) {
givegraph(this.__data__);
})
这传递了我正在寻找的正确数据。对于鼠标悬停事件中的一项,我的数据看起来像这样
{
color: "red",
uses : 22,
years_used:[1,2,3,4,5],
numberofPens:[44,39,29,54,09]
}
我的 givegraph 功能看起来像
function givegraph(d){
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function(d) {return x(d.years_used); })
.y(function(d) { return y(d.numberofpens); });
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(data, function(d) { return d.years_used; }));
y.domain([0, d3.max(data, function(d) { return d.numberofpens; })]);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
当我在 valueline 或域函数中调用它时,数据没有被传递。当我使用命令查看控制台中的数据时,什么也没有显示。
.x(function(d) {console.log(d);return x(d.years_used); })
数据正在 givegraph 函数中传递,但是当我将它用于匿名函数时,它不存在。我怎样才能解决这个问题
解决方案
推荐阅读
- swift - 添加前导和尾随间隙 UITableViewCell
- javascript - 如何在单击的 div 中向具有 id 的子元素添加类 - jQuery
- c++ - 我的显示功能有问题
- django - Django - 如何在视图中更改表单的占位符
- javascript - Appcelerator Titanium中适用于Android平台的Ti.Barcode模块?(条形码扫描器)
- sql - 如何避免 SQL 中的小数点而不是四舍五入?
- api - 从 kwikee api 获取图像
- c# - 将 html 添加到 webview 显示为空白 iOS xamarin 表单
- python - SyntaxError:Pandas 中的语法无效
- javascript - Vuejs: Show confirmation dialog before route change