mastermaps / d3-slider Goto Github PK
View Code? Open in Web Editor NEWD3.js slider
Home Page: http://mastermaps.com
License: BSD 3-Clause "New" or "Revised" License
D3.js slider
Home Page: http://mastermaps.com
License: BSD 3-Clause "New" or "Revised" License
Using the Range Slider, which is invoked by using a two number array as a value
d3.slider().value([50, 70])
the console throws an
ReferenceError: Can't find variable: divRange
This can be fixed by declaring
var divRange;
as a private variable (moving from line 71 to 49)
At the moment I specify a slider for use on a filter operation, relating to properties in an array I store
mboslider = d3.slider().min(minscore[14]).max(maxscore[14]).axis(true) .on("slide", function(evt, value) { filtscore[8] = value; filter(); });
When these values are updated, I call mboslider.min
or max
as appropriate, which updates the values within the slider object, but doesn't manifest in any changes of scale. Manually changing the scale using the in built setter d3.scale.linear().domain([minscore[14], maxscore[14])
doesn't appear to work, as no scale appears at all in this circumstance.
it looks like when you try to set handles of a range slider programatically you can't use an array for the value, as would be expected when you set up the thing e.g.
rangeSlider.value([25, 75])
however you can move one slider handle by
rangeSlider.value(25)
but that defeats the purpose of a range slider, as the other handle can't be controlled at all.
This slider is such a valueable addition to the d3js toolkit that I hope it will find some skilled developers to contribute
Hi,
Any chance this will be updated to work with D3 v4?
Certain things it needs to work like rebind and a few others have been deprecated or their functions have had their name changed.
Currently I can create a slider like this
var slider = d3.slider().min(0).max(10);
d3.select("#slider").call(slider)
This creates a slider. Is there a way to update the position of the slider via javascript. For example, executing slider.value(5)
should update the position of the slider.
How to get the value for slider with min, max and step values ?
d3.select('#slider7').call(d3.slider().axis(true).min(0).max(1024).step(100));
Using the slider vertically you have the min-Value at the bottom and the max-Value at the top, however using an axis, even a custom one, results in the lowest tickValue at the top and highest tick-Value at the bottom, thus not corresponding to the data.
For my individual project I could fix this with changing to
axisScale = scale.copy().range([sliderLength, 0]);
but maybe this can be solved more universally to make that great slider even more awesome.
Let's say I have a horizontal slider, and when I move my slide handle, how to make the "unselected" portion to grey out ??
For example --> http://www.land-of-web.com/wp-content/uploads/2012/02/1318.jpg
Thanks for any advice.
Hi,
I used following code in my project for slider.
essai = d3.slider().scale(d3.scale.ordinal().domain(["2001", "2002", "Winter-2003", "2004-2005"]).rangePoints([0, 1], 0.5)).axis(d3.svg.axis()).snap(true).value("2001"); d3.select('#slider12').call(essai);
It is not working and not able to get any values on events.
Please suggest
I have found a semantic issue when I try and place two range sliders on the same page. In short some elements reuse what is supposed to be a unique id.
Looking at the demo page
http://benheb.github.io/d3.slider/
the range slider created by
d3.slider().value([10, 25 ])
here is an edited outline of the HTML
When there are two sliders on the page there will be 2 elements with unique id "handle-one" and two elements with id "handle-two"
The solution is to change the id attributes into class attributes - and then tighten up the select of element in the code where appropriate.
I really like this project and will try and find the time to work on the solution soon...but thought I should outline the issue.
I found that when I inserted a slider, my dropdowns failed to expand. Below is reproducible HTML:
<link rel="stylesheet" href="d3.slider.css" />
<div class="testSlider"></div>
<hr>
<select>test
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.slider.js"></script>
<script>
var slider = d3.select(".testSlider")
.call(d3.slider()
.axis(true)
.value([0, 100])
.on("slide", function(evt, value) {
console.log(value[0]);
}));
</script>
I am making multiple range sliders dynamically depending on what data I am pulling in. I have gotten the sliders to slide just fine but when trying to edit the span text I don't know which slider is being clicked so I can't edit the right span.
I am also creating the divs and spans dynamically.
Is there a way to get the ID of the div that contains the range slider that is being clicked? I could then compared which one and be able to select the right span to edit.
Has anyone successfully loaded this module with require()? I'm assuming a shim is needed, but I can't figure out what it should look like. Right now I have:
require.config({ paths: { "d3": "https://d3js.org/d3.v3.min", "d3.slider": "lib/d3.slider" }, shim: { "d3.slider": { "deps": ["d3"], "exports": "d3" } } }); console.log(d3.version); d3.select("#time_slider").call(d3.slider());
This logs:
3.5.17
TypeError: d3.slider is not a function
The slider does not support ordinal scales, wouldn't be great to support that?
Two problems when resizing the window (Bootstrap used in this example)
http://www1.journaldemontreal.com/2014/04/inondations/
Am I using it wrong or are these just limitations of the current release 1.32 release?
d3.select("#link-strength-slider")
.call(d3.slider()
.min(0)
.max(1)
.step(0.05)
.value(Session.get("linkStrength"))
.on("slide", function(evt, value) {
Session.set("linkStrength", value);
// force.stop();
force = force.linkStrength(value);
force.start();
}));
later on I want to do something like
$("#link-strength-slider").val(10)
any ideas?
Hi, I am trying the latest version from the master branch. After opening index.html from browser, there is an exception "containerSize() not defined" whenever I drag the slider.
It seems that this bug was introduced in the commit f4b5c68
where sliderLength
is changed to containerSize()
but the function containerSize
is not defined.
Custom axis on top is is shown way below the slider rail on FIrefox.
Tested on Firefox version 24 with the demo page.
I have found an issue in the value function when trying to reset the slider handle from 0.
If the handle has been pulled down to the bottom and so the value is 0, when calling slider.value(100), the value function checks the old value (0) which evaluates to false and so the moveHandle function is never called.
In horizontal orientation, when specifying margin(0), the axis is not visible.
Workaround is to remove the height assignment in line 104 (https://github.com/turban/d3.slider/blob/master/d3.slider.js#L104):
svg.attr({
width: sliderLength + margin * 2
//height: margin
});
Hi,
I see that every time you create a new slider, the slider handle always have an id of "handle-one". When one wants to change or add text to the handle(say show the current value of the handle), would it be better to differentiate the "id"s?
Can this work with different d3 axis scales, e.g. a log-scaled axis?
The div of the slider changes if I change the window width. But the labels of the axis stay at the same locations, making them incorrect.
When clicking on the slider, the slider moves to the new position but does not dispatch a "slideend" event.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.