score:8
Accepted answer
In your hoverMouseOn method, the variable d is undefined. You'll need to use d3.bisector to find the closest data point, like this:
var bisectDate = d3.bisector(function(d) { return d.class; }).left;
var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);
var d0 = data[i - 1]
var d1 = data[i];
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
Also, I put the mousemove listener on 'vis' instead of 'rectHover':
vis
.on("mouseout", hoverMouseOff)
.on("mousemove", hoverMouseOn);
and used d.number instead of d.class for the y values. If you want the tooltip to always be on the line it gets a bit more complicated. Here's a working fiddle.
Might be easier to just put the tooltip at your mouse coordinates like in this fiddle.
Source: stackoverflow.com
Related Query
- D3.js: Line chart - tooltip and vertical line of hover
- how to change C3JS vertical tooltip line color and hide y axies line
- How to add tooltip to line chart written in typescript and angular
- How to create a line chart with vertical line and different backgrounds?
- Is it possible to add zoom and tooltip on the same line chart in d3js?
- D3.js: Wrong position of horizontal and vertical focus lines (crosshairs) in line chart
- D3 js line chart with tooltip on hover with multiple line chart
- D3.js Draw vertical line after every 2 bar and draw x-axis label on the top of bar chart
- D3js vertical and horizontal custom line display overflow in zoombable chart
- D3.JS time-series line chart with real-time data, panning and zooming
- Multiseries line chart with mouseover tooltip
- Solid and dashed line in D3 line chart
- Draw a vertical line representing the current date in d3 gantt chart
- NVD3 line chart with vertical line
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- D3.js combining bar and line chart
- Line chart using ordinal x-axis with d3.js and nvd3.js
- d3 line chart and clip-path
- d3 v4 drag line chart with x and y axes
- How to add a fixed range vertical line to a D3.js chart
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- nvd3 line chart not shown properly. (dots and shaded area)
- D3 Line Chart to display first and last point values
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- d3.js multiseries line chart tooltip issue
- d3 tooltip position issue in line chart using javascript
- Align lines and dots with x-axis values in line chart
- d3: how to move a vertical line in horizontal direction and support 'pause' and 'continue' movement
- Considerable difference between Firefox and IE displaying plot line chart
- d3: tooltips on multi series line chart at each line when mouse hover event
More Query from same tag
- D3.js, trouble initiating shp2json - encoding-indexes error
- How to dynamically set distance length of connected nodes?
- d3 tooltip. Collapsible tree. Error when .on(mouseover,function(....)) is called
- tickSizeOuter not equal zero, but just first and last tick of yAxis shows line
- tickSubdivide not always working?
- Variable is undefined when angular script loads
- Functions don't recognize variables
- D3 bar chart not working properly with all negative and positive values
- format flare.jason from existing json
- d3 v4 tree zoom out when a node expanded
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How to break long axes labels in plotly chart
- D3.Js Bar Chart issue
- How to select categories within data using d3
- d3.js - select force layout group not update the nodes
- d3 - select/unselect node onclick
- using d3 transition in large rails app
- TypeError: Cannot read property 'bar' of undefined
- Updating d3 scatterplot, new data points are not in the correct positions
- How to run D3 Javascript in JSF
- Convert a transition line chart to D3 v4
- D3 - Shrink Linear Scale Range
- Reduce number of ticks for log-scale in nvd3 line chart
- cs.js - displaying only one line at the same time (in multi-line chart)?
- D3.stratify Uncaught Error: ambiguous: Distributive property
- How to rotate an object around the center in d3.js
- D3 Tree Layout Separation Between Nodes using NodeSize
- Custom multi-scale time formats in d3
- leaflet.js: too slow with custom svg markers (and a lot of points)
- Filter d3.s to show specific data