問題與D3線圖

Question

所以我試圖用馬克的回答來實現我的折線圖的工具提示/例如從這裏Multiseries line chart with mouseover tooltip

我能夠得到提示線顯示爲我將鼠標懸停在提示我數據點，但是我被一個錯誤阻止，我假設我的x.invert函數。

Uncaught ReferenceError: x is not defined 

我檢查，看看是否支持這種功能，d3v4和研究其他的例子，但沒有運氣。

在我這裏是我在jsfiddle完整的代碼，在此先感謝。

https://jsfiddle.net/zos5jfzp/

Answer 1

有一個在你的代碼中的錯誤：命名規模xScale，而不是x

你必須爲你的y規模相同的問題，其重命名爲yScale

Uncaught ReferenceError: x is not defined來自於你

您嘗試使用查詢選擇器獲取所有行line但你沒有給班級分配班級。

vis.append('svg:path') 
    .attr('class', 'graph-line') 
    .attr('d', lineGen(d.values)) 
    .style("stroke", function() { 
     return d.color = color(d.key); 
    }) 
    .attr('stroke-width', 2) 
    .attr("id", 'tag' + d.key.replace(/[^\w]|_/g, '')) 
    .attr('fill', 'none'); 

而且

var lines = document.getElementsByClassName('graph-line'); 

最後，你必須改變

idx = bisect(d.Count, xDate); 

到

idx = bisect(d.values, xDate); 

這裏是更新的小提琴：https://jsfiddle.net/zos5jfzp/1/