工具提示返回 [object, Object]
Tooltip returning [object, Object]
我正在尝试完成散点图 exercise from free code camp. However, I have only been learning d3 on my own for a few hours now and I am stuck trying to determine how to display specific data in the tooltip after following a tutorial from lynda.com.This codepen 是我目前所拥有的。
我通过执行以下操作创建工具提示:
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)
然后我执行以下操作以显示工具提示
.on('mouseover', function(d, i) {
tooltip.transition()
.style('opacity', .9)
tooltip.html(d)
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
})
.on('mouseout', function(d) {
d3.select(this)
.style('opacity', 1)
})
myChart.transition()
.delay(function(d, i) {
return i * 20;
})
.duration(1000)
.ease('elastic')
当我用
替换 tooltip.html(d)
时
tooltip.html(function(d, i){
return d[i].Name;
})
没有显示任何内容。我做错了什么?
在 D3 中,第一个参数通常命名为 d
,是 datum。现在,您的数据是这样的对象:
{
"Time": "38:36",
"Place": 11,
"Seconds": 2316,
"Name": "Floyd Landis",
"Year": 2006,
"Nationality": "USA",
"Doping": "Stripped of 2006 Tour de France title",
"URL": "https://en.wikipedia.org/wiki/Floyd_Landis_doping_case"
}
因此,您必须通过它们的键访问它们的值:
.on('mouseover', function(d, i) {
tooltip.transition()
.style('opacity', .9)
tooltip.html("Name: " + d.Name + "<br>Year: " + d.Year + "<br>Dopping: " + d.Doping)
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
})
这是您更新后的 CodePen:https://codepen.io/anon/pen/WpdyZv
我正在尝试完成散点图 exercise from free code camp. However, I have only been learning d3 on my own for a few hours now and I am stuck trying to determine how to display specific data in the tooltip after following a tutorial from lynda.com.This codepen 是我目前所拥有的。
我通过执行以下操作创建工具提示:
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)
然后我执行以下操作以显示工具提示
.on('mouseover', function(d, i) {
tooltip.transition()
.style('opacity', .9)
tooltip.html(d)
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
})
.on('mouseout', function(d) {
d3.select(this)
.style('opacity', 1)
})
myChart.transition()
.delay(function(d, i) {
return i * 20;
})
.duration(1000)
.ease('elastic')
当我用
替换tooltip.html(d)
时
tooltip.html(function(d, i){
return d[i].Name;
})
没有显示任何内容。我做错了什么?
在 D3 中,第一个参数通常命名为 d
,是 datum。现在,您的数据是这样的对象:
{
"Time": "38:36",
"Place": 11,
"Seconds": 2316,
"Name": "Floyd Landis",
"Year": 2006,
"Nationality": "USA",
"Doping": "Stripped of 2006 Tour de France title",
"URL": "https://en.wikipedia.org/wiki/Floyd_Landis_doping_case"
}
因此,您必须通过它们的键访问它们的值:
.on('mouseover', function(d, i) {
tooltip.transition()
.style('opacity', .9)
tooltip.html("Name: " + d.Name + "<br>Year: " + d.Year + "<br>Dopping: " + d.Doping)
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
})
这是您更新后的 CodePen:https://codepen.io/anon/pen/WpdyZv