工具提示返回[對象，對象]

我正在嘗試從免費代碼陣營完成散點圖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(function(d, i){ 
    return d[i].Name; 
})

沒有任何顯示更換tooltip.html(d)向上。我究竟做錯了什麼？

來源

2017-03-19 hamica

把'控制檯.log（d）'in function。你會在控制檯中看到什麼？也許你應該返回'd.Name'。 –

在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

來源

2017-03-19 07:47:44

工具提示返回[對象，對象]

回答

相關問題