I think the problem relates to the use of transitions. There are four places where the
chart function is called with a selection that has been returned from
.transition(), and that appears not to work.
Three of the four changes are in lines 63, 69 and 74 of
d3linewithlegend.js. Each of these three lines reads as follows:
Replace each line with
Finally, in the
index.html file, replace
svg.transition().duration(500) .attr('width', width(margin)) .attr('height', height(margin)) .call(chart);
svg.call(chart).transition().duration(500) .attr('width', width(margin)) .attr('height', height(margin))
After making this change, hovering over the legend worked for me, in Chrome, Firefox and Edge.
Transitions were overhauled in D3 version 3.0, so it's perhaps not a surprise that D3 v2 code involving them doesn't work in D3 v3. I can't say I understand them well enough to know exactly where the problem is, but I did observe that if enter the following line in the console
then D3 throws the same exception that I got when I tried to view the visualization you linked to. This led me to avoid a situation where
transition() was being called on a selection returned by a call to
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- Tooltips for multiple lines chart with legend click d3.js
- Time in x-axis and data for the y-axis for line chart in d3.js doesn't match/show with what (data) is on JSON
- d3.js creating a simple line chart with array of DateTime and int
- D3.JS time-series line chart with real-time data, panning and zooming
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- Special donut chart with different rings/arcs for positive and negative values
- Line chart using ordinal x-axis with d3.js and nvd3.js
- Draw D3 Simple Line chart With an Array
- Mix bar and line charts with Rickshaw (d3 based graphing library for js)
- d3 v4 drag line chart with x and y axes
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- Align lines and dots with x-axis values in line chart
- Grouped bar chart with zoom and updateable data error
- C3js - combination chart with data labels only for line
- d3v4 checkout chart - making sure the color scheme is correct for the legend and circles
- simple multi line chart with D3
- D3 - Single and Multi Line chart tooltips
- d3js gantt chart with date/time scale at the top and current day blue line
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- Incomplete line chart with missing points and missing lines
- Getting the scale right for a line chart for a simple CSV in D3 v4
- Simple D3.js line chart with data that are values collect every hours
- How to create a multi-series line chart with series for each unique item in 1st column?
- NVD3 Line Plus Bar With Focus Chart only displaying half width of first and last bar
- How do you get JSON data and create a line chart with d3.js?
- SVG Legend for multi line chart d3 v6
- D3 Bar Chart with Variable X and Y(variable width and height for bars)
- d3 multi line with mouse over cursor for both y AND x value
- Generating a simple bar chart with d3.js and an array of form data
More Query from same tag
- Adding drop down menu using d3.js
- How to Build this Rounded Two Tone Donut Chart?
- how to highlight a bar in stacked bar chart d3.js v4
- Circle element is not accessing
- how to find graph nodes based on a function?
- d3.js and geojson map throws error
- Make the svg follow a hierarchical structure
- x-value mouseover tooltip d3 - editing the tooltip style and text
- D3 dynamic json key names
- d3.js make axis ticks clickable
- How to Make a bar chart with rounded corners with extended grid in d3.js?
- Cannot read property 'weight' of undefined in d3.force implementation
- D3.js: Centering a responsive pie chart in its parent div
- SVG path error: <path> attribute d: Expected number
- Transitions using line graph and Rickshaw
- How to word wrap legend labels in d3
- D3 Simple Line Chart: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "[object Object]"
- Setting a map based projection in D3 with leaflet on Angular
- Color scale domain not displaying correctly
- Selectively removing node labels in D3 force directed diagram
- D3 Getting values from keys using array of objects
- How to change the X-axis line from top to bottom in d3.js
- D3: After adding a node, drag is attached but it does not work
- Updating graph as I drag a point around
- Large dataset visualisation
- D3: how to show lone point in a line chart
- Replacing D3.js CSV source with JSON
- How to make axis "smart" and "flexible" so that the starting/end points on axis are sensible in D3 V4?
- Does d3.timer wait for the callback to complete before re-running it?
- How to make an svg text with d3.js that flashes from black to white an back continuously?