score:3
in mike's original code, he chose the name focus for his svg element which is unfortunate - it already exists in the dom, and might be confusing matters.
in any case, the problem here is primarily one of scope.
mike defines focus
outside the scope of getting the data, thus putting it into the global scope. therefore, it's available to the brushed()
function.
the first step i would take would be to move the definition of the focus
var outside of the updatedata() function.
however, there are a few other problems:
- you should be using d3.tsv with an anonymous function to get the data. it will make things much simpler.
in the brushed function, you need to use an anonymous function and pass the area function d.values, rather than just d. you did this in the updatedata function, but not in brushed. i.e.:
function brushed() { x.domain(brush.empty() ? x2.domain() : brush.extent()); focus.selectall("path.focus").attr("d", function(d){return area(d.values)}); focus.select(".x.axis").call(xaxis); }
i have a rough version of your chart with the brushing working here: http://jsfiddle.net/zq2ef/ but, i would go over mike's example with careful attention to where things are defined, and which scope they are in - it will help you understand where the problem lies!
Source: stackoverflow.com
Related Query
- Combining stacked area chart and brushing in D3
- A better way for a stacked area chart toggle between a percent scale and absolute scale?
- D3 stacked area chart with x-axis as Month names and also with Legends
- NVD3 - Adding and resizing multiple vertical lines to stacked area chart
- D3.js combining bar and line chart
- Stacked Area Chart in nvd3js - X Axis overflow
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- d3 v4 nested data and stacked bar chart
- d3.js stacked bar chart with positive and negative values
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- nvd3 stacked area chart looks glitchy how to fix?
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- NVD3.js: Stacked and grouped bar chart with two y-axis
- NVD3 Stacked Area Chart
- How to show values stacked bar chart utilizing dc.js and d3.js?
- D3 Stacked Bar chart : issue calculating and displaying sum/total of each bar
- D3 stacked area with brushing - only first nested element shows
- d3js chart dots and area not updating
- D3 v6: How to zoom stacked bar by selected segment to stretch only selected segment and shrink rest segments (and keep initial chart width)?
- D3.js chart call and re-plot area after zoomed
- Using d3-tip and CSS hover effect with d3 stacked bar chart
- D3.JS to create a Stacked Area Chart
- Why is my D3 stacked area chart flipped?
- Appending Stacked Bar and Another Bar Chart in D3
- Stacked area chart SVG path d=NaNNaNNaN
- Hide labels in narrow areas of stacked area chart (D3 Observable)
- Add Spacing and Interactivity to D3 Vers 6 Stacked Bar Chart
- d3.js Stacked Area chart - not appearing
- Stacked bar chart not showing and no errors in console log either
- d3 area stacked line chart
More Query from same tag
- d3-force: keep graph compact when filtering/removing nodes
- formatting a number with SI prefix change in version 4
- What does D3.js "Data" function expect as its first argument?
- D3.js table lookup not working on one site ... works on localhost site
- d3.request generates unauthorized error
- How to display the percentage % on a NVD3 Pie Chart?
- Creating world choropleth map with D3
- D3 canvas force directed layout bottom issue
- How do I graph an individual line for each the groups within a Javascript map object using D3.js
- d3: How to properly chain transitions on different selections
- Retrieving keys from a json array file(dynamically) and use it for d3js functions
- How to filter children based on whether the parent is filtered in D3?
- Separate data from datahash
- Q: Fix blurry animated line to paths on canvas?
- Getting point mouse interaction and brushes to work together
- Axis and svg text elements hide each other
- D3js Contour Displaying as Black Box
- How do I take into account scale when getting height/width of a d3 element using bounding rectangle
- In D3 how to enable zooming only for particular path?
- Why mouserover returning all data in callback
- D3js How to format the content of some columns in a table
- Projection in D3 v5 not working with coordinates data
- Change Color of Links for Sankey Diagram in D3 / Javascript
- Multiple elements with multiple event handlers passing parameters; d3.js; simplify code
- d3 select from angular
- Starting a d3 axis timescale from zero
- D3 Force Layout with text Label And Icon
- How to add dots in D3 graph?
- Rotate Hierarchical Bar chart
- How to add icons in dc.js piechart slices instead texts