工具提示返回 [object, Object]答案

【问题标题】：Tooltip returning [object, Object]工具提示返回 [object, Object]
【发布时间】：2017-03-19 06:58:49
【问题描述】：

我正在尝试从免费代码营完成散点图exercise。但是，我现在只自己学习了 d3 几个小时，并且在遵循 lynda.com 的教程之后，我一直在尝试确定如何在工具提示中显示特定数据。Thiscodepen 是我到目前为止所拥有的.

我通过执行以下操作来创建工具提示：

 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; 
})

什么都没有出现。我做错了什么？

【问题讨论】：

将console.log(d) 放入函数中。你会在控制台看到什么？也许你应该返回d.Name。

标签： javascript html d3.js scatter-plot

【解决方案1】：

在 D3 中，第一个参数通常命名为 d，是基准。现在，您的数据是这样的对象：

{
    "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

【讨论】：