score:2
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:
selection.transition().call(chart)
replace each line with
selection.call(chart).transition()
finally, in the index.html
file, replace
svg.transition().duration(500)
.attr('width', width(margin))
.attr('height', height(margin))
.call(chart);
with
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
d3.select("body").transition().transition()
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 transition()
.
Source: stackoverflow.com
Related Query
- 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
- Crossfilter (d3js/dcjs) get group size in group
- d3.js: grouping with <g> (with the data join enter/update/exit cycle)
- Change class of one element when hover over another element d3
- How Can I highlight the parents names and the connection lines when I hover on their child in family tree
- Using multiple datasets for a given D3 force layout
- How to import d3.js in a node and typescript project? [ERR_REQUIRE_ESM]
- Creating axis with custom (range) values
- d3: Elements move when scale() transform is applied
- What is the third parameter passed to listener?
- Highlighting lines on a random walk plot mpld3
- Why are labels/text not rendering on this d3.js scatter plot?
- D3 - Updating and clearing chart's on click
- Rotation with transition
- D3.js - how selections work - Need clarification on Mike's article
- d3.js: How to convert edges from lines to curved paths in a network visualization by drawing a quadratic Bezier curve?
- Problems in displaying multi-line chart
- d3 brush and clipPath: Main chart outside bounds
- D3 V4 how to force Label of stacked bars to visible for small bars? please reply I'm really struggling for it
- How to show tooltip for an SVG element that is inside a zoomable SVG rectangle?
- DC.js: Unable to make the line plot in decreasing order
- d3.js not reading JSON (d3.js + dc.js + crossfilter)
- d3.pack(): multiple parent circles each with a unique color
- How to access nested data in D3js
- Creating DC charts dynamically
- making circle clickable in svg
- Specifying the json file for some visualization via a dropdown box
- How to set a nvd3 axis to use strings instead of numerical values ?
- Direct data input from Django for a D3 graph
- D3 js - is it possible to draw straight lines between tree nodes?
- d3.js on "click" event handling running function without click event