Trung tâm cá nhân
sách gpt4 ai đã đi

Trả về chú giải công cụ của [đối tượng, đối tượng]

In lại 作者：行者123 更新时间：2023-12-03 04:45:34 26 4
mua khóa gpt4 Nike

我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 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; 
})

没有显示任何内容。我做错了什么？

1 Câu trả lời

在 D3 中，第一个参数通常命名为 ngày，是dữ liệu。现在，您的数据是这样的对象:

{
    "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 + "
Year: " + d.Year + "
Dopping: " + d.Doping)
        .style('left', (d3.event.pageX - 35) + 'px')
        .style('top', (d3.event.pageY - 30) + 'px')
})

这是您更新的 CodePen:https://codepen.io/anon/pen/WpdyZv

关于javascript - 返回 [对象，对象] 的工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42883828/

26 4 0
Bài viết được đề xuất: javascript - 如何重命名 Google 电子表格(文件)并使用工作表中的值填充其内容
Bài viết được đề xuất: azure - 将 Azure blob 升级到 DataLake Gen 2 时验证失败
Bài viết được đề xuất: .net - Azure 函数 v4 dotnet-isolated - 如何读取 www-form-urlencoded 中的数据？
Bài viết được đề xuất: javascript - 莫纳卡 JavaScript 不工作
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com