score:2
as far as i can tell, you're on the right track.
you obtained subdata
, then you applied it to rects
rects.data(subdata)
.remove();// this is wrong!!
i'm not sure why you're calling remove()
, but that's essentially removing all dom elements that are in subdata. this should be taken out.
next, (i'm pretty sure that) you need to reassign rects to the new binding. i.e.
rects = rects.data(subdata);
on the next you append all the enter()
'ing rects. but you're missing some of the settings ('y', 'fill', etc attributes). but you also need to update all the subdata members that were not added nor removed from the set. so it becomes:
rects.enter()
.append('rect')
.attr('y',function(d) {
return(scale.yy(d.count));
})
.attr('height',function(d){
return(scale.yh(d.count));
})
.attr('fill',function(d){
return(d3.hsl(120-(120*(d.count/50)),1,0.1));
});
rects// this happens for all updated and entering rects
.attr('x',function(d){
return(scale.x(d.date))
})
.attr('width',barwidth);
finally, you need to remove ones that are no longer in subdata:
rects.exit().remove();
this logic is a lot like what you have higher up, in the init script (except the init version only operated on the enter()
'ing set). so you should move it all into a function:
updatechart(newdata) {
rects = rects.data(subdata);
rects.enter()
// etc....
rects.remove()
}
and call this function at init time and when new subdata is being applied.
Source: stackoverflow.com
Related Query
- Using Javascript D3 library, how replace data in selection of rects?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- How to iterate over data in JSON file using D3 javascript
- How to convert this data to csv using Nodejs/ JavaScript
- How do I prevent selection of data outside my selected range from highlighting when using crossfilter.js?
- How to import XML data using d3.js?
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- how to create labels for data in donut chart using d3.js
- Using d3.js, how can I display data faster on my chart?
- How to use a JavaScript chart library like D3.js or Raphaël in server-side Java
- How to set the Origin (drag.origin) for drag behavior in d3 JavaScript library
- Putting an arrow (marker) at specific point on a path when using the d3 javascript library
- Using JSON data in D3 Javascript visualisation
- How to update elements of an HTML that the elements are created using data from a CSV file?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How to visualize mysql data in d3js using django?
- D3 Library — How To Access Data from JSON in this example
- D3: Using a closure to update a selection without re-binding data
- How to remove circular dependencies in d3 selection using rollupjs?
- How to get value from the element using selection in d3
- How to load data using XHR in D3
- how to display bottom data for row chart using dc.js
- How to add all but a few columns using javascript and d3
- How to divide a D3 selection into groups by using the selection.filter method in a loop
- How would I import a single column CSV file into a pie chart using Javascript D3?
- How to display data when using Rickshaw.Graph.Ajax
- How do I Bind Data from a .tsv to an SVG's paths using d3.js for a Choropleth Map
- Any one know how to Apache hive data visualization using D3js?
- How to create d3 graph using data from Rails database
More Query from same tag
- D3.js Mouseover text inside donut chart
- Make Gist from Github repo for display on bl.ocks.org
- setting smoothing parameters in d3 js smoothing splines
- Issue labeling d3 sunburst
- D3JS or Jquery: convert JSON string to integer
- Side by Side Graph D3.js
- How to update elements of D3 force layout when the underlying data changes
- In D3 force-directed layout, how can I position fixed nodes programmatically, without dragging?
- D3 Force Graph Neighboring Without Index (Including Self)
- Drawing bar charts vertically after each other d3.js
- Filter data on multiple columns with checkboxes - D3
- d3 filter the return function value force layout
- Text label hides in circle d3
- Find intersection of SVG path
- dc.js - how to get the average of a column in data set
- How can I make my lines spin with the globe?
- Updating only those SVG elements where the underlying bound data has been modified
- D3 linechart, can't edit the amount of ticks with an ordinal scale?
- Running GDAL from the command line on Windows 10 x64
- Accessing d3.js element attributes from the datum?
- Adding a legend to a D3.js pie chart
- Call a function if not an element was clicked in svg, but other elements using d3.js v5.4.0
- border for d3 stack bar chart on selection
- text and input elements appended and given attributes the same way. Text shows but not the input. Why?
- D3.js Stacked Bar Chart Selects
- D3, SVG and textPath: How to move the text down?
- Rendering d3.js html table without blocking UI
- D3.js Basic Chart Drawing Example not displayed
- Add circle to pack layout
- Changing object variables to abbreviations before passing it to a network graph