score:6
apparently you need to reset the brush's extent, so the internal xextent
and yextent
variables are reset. seems like a bug to me.
brush.extent(brush.extent());
score:0
i had the same problem, and fixed it by deleting the brush group and calling it again.
before graph resizing:
var brush = d3.brushx().extent([[0, 0], [graph_dim.w, graph_dim.h]]).on("end", brushended);
graphcontent.append("g").attr("class", "brush").call(brush);
after graph resizing:
// update graph height
graph_dim.h = my_new_graph_height;
// update brush extent
brush.extent([[0, 0], [graph_dim.w, graph_dim.h]]);
graphdiv.select(".brush").remove();
graphcontent.append("g").attr("class", "brush").call(brush);
probably not the best way, but it works :-)
note that if you have mouse events on the same graph, they will no longer be accessible (the brush will "cover" them) -- see this answer.
score:2
i caught the problem in your zoom function you re define xscale range as
xscale
.range([-offset, width + offset]);
after this you need to pass it here
brush = d3.svg.brush()
.x(xscale) // this need new values
.extent([.1, .6]),
than after you can call to re draw your time line
brushgroup
.call(brush);
here the fiddle https://jsfiddle.net/azksfjjw/4/
Source: stackoverflow.com
Related Query
- D3 updating brush's scale doesn't update brush
- d3 update old scale when pan and zoom
- Disable brush on range chart before selecting a scale from the dropdown/on page load(dc.js,d3.js)
- Changing time scale from days to weeks, how do I update and sum data values?
- Pie chart not updating properly when using brush in series chart
- updating text position on pie chart update
- D3 Brush coordinates under CSS transform scale
- D3js Updating Histogram elements not working (General Update Pattern)
- Update zoom state in d3 v4 after manually setting translation and scale
- d3.js Update time domain based on brush selection
- Svg brush as slider. How to set slider scale graduation frequency
- d3 - updating data doesnt cause a refresh
- Update a Donut Chart Arc Based on a Brush Extent
- D3 Brush + Zoom: Fix update delay (see GIF)
- Updating chart.ygrids in Billboard.js does not update the class
- D3 Scale domain does not update with selected data. I get negative values
- d3 brush partially updating axis not circles
- d3: update dataset not updating the DOM
- D3 update not updating new Array
- d3 brush and setting minimum tick marks with a time scale
- D3js : data update is not updating right objects
- D3.js Line chart not updating properly when applying the general update pattern
- Update pattern: updating changes every node
- Update domain of color scale only once in d3 reusable charts
- d3.js: updating fails to update one element & creates malformed markup
- In d3.js, update main chart to reflect brush state when adding/removing lines
- How to update the map scale on crossfilter dimension.filter()?
- D3 updating bar chart with new data set cause update issue
- How to update the axis scale on change events in cubism/d3
- I dont understand why my d3js chart is not updating though it passes through update function
More Query from same tag
- D3.request - get JSON from PHP
- Displaying different colors on the map or displaying color on mouse over event
- d3 axis rendering outside the SVG
- Redraw a d3 force layout without moving nodes around
- D3.js highlight related nodes / links
- How to display multiple values on mouseover on map in d3?
- Convert R dataframe into tough JSON list of lists for d3.hierarchy model
- updating text position on pie chart update
- What is "size" in flare json -- used in D3 examples?
- In d3.js, how can I preserve index i (or coerce / force group index j use in it's place) in data bindings subject to nested selections?
- Can I update an ongoing d3 transition on drag
- d3.js: formatting 500 million needs to display as 0.5G, but displays as 500mG
- Modify link and node colours in Sankey with NetworkD3
- Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?
- d3.js multi line chart with brush
- d3.js: How to add a data key?
- How to show different titles for different chart in D3js?
- Transition for grouped bar chart in d3 when updating the data values
- D3js and React regarding DOM manipulations
- How can I alter the zooming capability on a d3 sunburst chart?
- d3.js word cloud load data from json
- Chart Jumps on drag with d3.zoom d3 v4
- Having issues with flattening some nested data
- Using D3 chart in Pentaho CDE
- Is it possible to re-render a d3.js graph live?
- Multiple draggable charts d3.js
- D3 selection and entry
- Getting graph attributes from JSON file with d3.js
- d3 chart displayed outside bootstrap div
- D3.js: Context + Focus zoom on multiple graphs