javascript - Changing an html attribute based on its current value in D3 -

javascript - Changing an html attribute based on its current value in D3 -

i sense i'm trying straightforward, can't seem figure out how. have page displaying several bar graphs, , i'm trying build button makes bars appear , disappear. bars have labels, , when button toggled, want half bars dissappear, remaining bars double in size , labels bars move downwards little bit.

i'm using d3.js draw graphs, , i've got working, except these little labels. i'm trying increment "y" attribute 15 pixels, can't seem find way request value before changing it!

initially thought

d3.selectall(".bar-value-label").attr("y", function(d,i){ homecoming d + 15;})

should work. however, when logged "d" was, turned out reference info object used create element.

so, i'm trying find way current value , in- or decrement it. there nice way within d3?

regards, linus

edit: okay, i've found way works. i'm doubtfull best/most efficient way, answers still much welcome :)

var resp_labels = d3.selectall(".bar-value-label-resp")[0]; resp_labels.foreach(function(d,i){ var old_y = parsefloat(d.getattribute("y")); d3.select(d).transition().attr("y", function(i){ homecoming old_y - barheight/4 ;}); });

i haven't had chance check works, think simplified version of solution:

var resp_label = d3.select(".bar-value-label-resp"); var old_y = +resp_label.attr("y"); resp_label.transition().attr("y", old_y - barheight/4);

javascript html d3.js