score:-1
nice piece of code, but i found a little bug.
it does lock your brush whenever s[1]-s[0] < 0.5
, but if you keep pressed the resize and bring all your brush to the oposite direction, it starts "moving" the brush without any action (i.e. it doesn't behave as it should).
i am pretty sure i can come up with a reasonable solution. if so, i'll re-post it here.
(sorry to post it here as an answer, but as you've already answered it once, i cannot post as a comment, i guess).
score:0
here is an example of limiting the brush's minimum width as 100px and maximum width as 200ps. i added a few lines into d3.v4.js, for setting the limitation of the brush width.
added brush.limit([min, max]) for set the limitation:
var _limit = null;
brush.limit = function (l) {
_limit = l;
}
break mouse move event in move() function:
if (_limit && e1 - w1 < _limit[0]) {
return;
}
(demo) (source code)
score:3
here's another strategy using d3.v4 an es6:
brush.on('end', () => {
if (d3.event.selection[1] - d3.event.selection[0] > maxselectionsize) {
// selection is too large; animate back down to a more reasonable size
let brushcenter = d3.event.selection[0] + 0.5 * (d3.event.selection[1] - d3.event.selection[0]);
brushsel.transition()
.duration(400)
.call(brush.move, [
brushcenter - 0.49 * maxselectionsize,
brushcenter + 0.49 * maxselectionsize
]);
} else {
// valid selection, do stuff
}
});
if the brush selection size is too large when the user lets go of it, it animates back down to the specified maximum size (maxselectionsize
). at that point, the 'end'
event will fire again, with an acceptable selection size.
note the 0.49
scalar: this is required to prevent floating point / rounding errors that could cause an infinite loop if the brush is move()
d to a size that is still too large.
score:5
i eventually solved it by redrawing the brush to its maximum allowed size when the size is exceeded:
function brush() {
var s = d3.event.target.extent();
if (s[1]-s[0] < 0.5) {
var start = math.round((data.length-1)*s[0]);
var end = math.round((data.length-1)*s[1]);
bar(data.slice(start,end));
}
else {d3.event.target.extent([s[0],s[0]+0.5]); d3.event.target(d3.select(this));}
}
demo: http://bl.ocks.org/3691274
i'm still interested in reading better solutions.
Source: stackoverflow.com
Related Query
- d3.js: limit size of brush
- How to disable legend in nvd3 or limit it's size
- How to Limit Size of Radius With d3.js
- How to make the extent of a brush match the size of the parent element?
- How do I create a brush with default size on D3?
- Minimum brush size without "flipping"
- How to make force layout graph in D3.js responsive to screen/browser size
- font size is not working in my d3.js code
- How to limit d3.svg.axis to integer labels?
- Using ViewBox to resize svg depending on the window size
- d3.js change color and size on line graph dot on mouseover
- Custom tick size on axis (d3js)
- Charge based on size - d3 force layout
- D3.js Brush Controls: getting extent width, coordinates
- D3 force layout: How do I set the size of every node?
- brush on rotated lines using d3 to create zoom effect
- How to increase size of pie segment on hover in d3
- Mouse events and brush in D3
- How to change the size of D3 nodes onclick
- d3.js brush fill color histogram
- D3 "Sunburst" Center Path Size
- Calculate the exact size of a font glyph
- D3 v4 Brush and Zoom on the same element (without mouse events conflicting)
- Change size of bubble in Scatter Plot for c3.js
- D3: change font size of axis labels
- Reduce the size of a large data set by sampling/interpolation to improve chart performance
- How to match text width to circle size in D3 circle pack
- issue while using d3 brush in a line+bar chart (zoom in line+bar chart)
- How to set the size of a d3 symbol?
- How do I adjust zoom size for a point in D3?
More Query from same tag
- Is there a way to get a subset/section of a path in d3.js?
- Children with n>1 parents in d3.js tree layout
- How to integrate graphviz in angular
- How to display top 10 pie chart slice in nvd3?
- how to search a node and highlight it
- Splicing array removes wrong node in force-directed graph
- How to move elements along with svg group
- "Error: <path> attribute d: Expected number"
- How to make map draggable in D3v6
- How to smoothly update a D3 v4 force diagram with new data
- How should i format my JSON and explain me some basic d3 graph node-link?
- D3 chart example "TypeError: data is undefined"
- D3 update line graph
- D3 Force directed layout + All nodes to original positions
- In d3 how can you format a date with single digits for month and year if they are under t0?
- D3.js not showing labels on first SVG after second SVG created
- jquery error when trying to get window width
- SVG path doesn't seem to orientate itself correctly
- How do I pass a reference to a d3 element to function?
- Transitions occur slowly while a d3.drag() is occuring
- How do I update multiple columns of data with D3?
- Apply function to each element of an array
- Calculating the number of bars in a bar chart in dc.js
- d3js force large number of nodes
- How do you export multiple d3 charts to powerpoint?
- D3 js How to get plain text in label at X axis and make value scaleLog
- Switching from require to import for d3 v4 modules
- How can I use the following html to dynamically create wordclouds for my android app?
- create a radial chart with d3.js
- D3 graph example