setting the value of an html5 input range via d3

[wimdows]

Hello dear d3 people,

Because of the holiday season and a lot of family matters I had to
take some time off from studying d3. Although it took me a day or two
to get back in to the right frame of mind, picking things back up
wasn't as hard as I expected it to be.

One thing I managed to do today, was using html5 sliders in
combination with d3.
I had tried JQuery sliders and JS sliders, but I found them all way to
complicated to be of any real use. As a general rule I would say, It
usually takes more lines of code (often spread out over several files)
to produce the sliders than to produce the d3 graph itself.

Turns out html5 sliders are exactly the simple, straightforward kind
of solution I I was looking for.
It's a shame the sliders are not implemented (yet) in all browsers.
But I'll live with that for now.

There is one thing I haven't found yet, though.

How can I make the slider follow any automated transitions in my
graph?

Let´s say I have a form that goes by the id of "someForm", an input
range baring the name "timeSlider", and a "steppingVariable" that
simply increments through the data
How would I have combine these in d3 to have my slider thumb move with
the steps in my step function?

I tried things like d3.select("#timeSlider").value(steppingVariable),
d3.select("#someForm").select("#timeSlider").value(steppingVariable) -
these must be pretty darn close, but I can't seem to find the right
phrase.

Could someone please help me out?

In any case thanks for your time.

Hope to see you guys and gals around this year!

Regards,

wim

[Jason Davies]

On Thu, Jan 26, 2012 at 05:49:41AM -0800, wimdows wrote:
> I tried things like d3.select("#timeSlider").value(steppingVariable),
> d3.select("#someForm").select("#timeSlider").value(steppingVariable) -
> these must be pretty darn close, but I can't seem to find the right
> phrase.

You probably want:

d3.select("#timeSlider").property("value", steppingVariable);

This sets the "value" property of the DOM node. As this is a
single-element selection, you could also do the equivalent:

d3.select("#timeSlider").node().value = steppingVariable;

My first suggestion would also work for multiple-element selections
though.

--
Jason Davies, http://www.jasondavies.com/

[wimdows]

Of course! Thanks a bundle, Jason. I had completely forgotten
about .property.
(That´ll teach me to not do d3 for nearly a month. ;) )

To get it to work I had to attach an ID to the timeSlider aswell as a
NAME, btw. I forgot why this is exactly, but I remember having done
something like that before.


wim

[Jason Davies]

On Thu, Jan 26, 2012 at 07:03:56AM -0800, wimdows wrote:
> To get it to work I had to attach an ID to the timeSlider aswell as a
> NAME, btw. I forgot why this is exactly, but I remember having done
> something like that before.

D3 uses CSS3 selectors: http://www.w3.org/TR/css3-selectors/

So yeah, you need .attr("id", "something") if you subsequently have
d3.select("#something").

Alternatively, you can keep a reference if you added the element using
D3, e.g.

var timeSlider = d3.select("body").append("input")
.attr("type", "range")
.attr("min", 0)
.attr("max", 100);

Later, you can say:

timeSlider.property("value", ...);

[wimdows]

Ah, okay. It's all coming back to me now :)

I'll (try and) keep that in mind. Html and d3 still are somewhat
seperate entities in my mind. But it sure can come in handy to do it
all in d3.


Meanwhile, I also stumbled across a workaround for the lack of range
input support in Firefox. Here is a nifty (and reasonably concise) bit
of javascript:
https://github.com/fryn/html5slider

Regards,

wim