javascript - Transition not working -
my goal given value in seconds(resp_time), want create counter in anticlock direction end once resp_time becomes 0.
i following tutorial: http://bl.ocks.org/mbostock/1096355 create polar clock. need arc decrease in go anti-clockwise. tried updating endangle value same, doesn't seem work. here's code:
var width = 960, height = 800, radius = math.min(width, height) / 1.9, spacing = .09; var resp_time = 61; var rh = parseint(resp_time/3600), rm = parseint((resp_time- rh*3600)/60), rs = parseint((resp_time- rh*3600 - rm*60)%60); var color = d3.scale.linear() .range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"]) .interpolate(interpolatehsl); var t; var arc = d3.svg.arc() .startangle(0) .endangle(function(d) { return d.value * 2 * math.pi; }) .innerradius(function(d) { return d.index * radius; }) .outerradius(function(d) { return (d.index + spacing) * radius; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var field = svg.selectall("g") .data(fields) .enter().append("g"); field.append("path"); field.append("text"); d3.transition().duration(0).each(tick); d3.select(self.frameelement).style("height", height + "px"); function tick() { field = field .each(function(d) { this._value = d.value; }) .data(fields) .each(function(d) { d.previousvalue = this._value; }); field.select("path") .transition() .ease("elastic") .attrtween("d", arctween) .style("fill", function(d) { return color(d.value); }); field.select("text") .attr("dy", function(d) { return d.value < .5 ? "-.5em" : "1em"; }) .text(function(d) { return d.text; }) .transition() .ease("elastic") .attr("transform", function(d) { return "rotate(" + 360 * d.value + ")" + "translate(0," + -(d.index + spacing / 2) * radius + ")" + "rotate(" + (d.value < .5 ? -90 : 90) + ")" }); if (resp_time > 0) { resp_time = resp_time - 1; rh = parseint(resp_time/3600), rm = parseint((resp_time- rh*3600)/60), rs = parseint((resp_time- rh*3600 - rm*60)%60); t = settimeout(tick, 1000); } } function arctween(d) { console.log(d); var = d3.interpolatenumber(d.previousvalue, d.value); return function(t) { d.value = i(t); return arc(d); }; } function fields() { console.log(rs); return [ {index: .3, text: rs+"s", value: rs}, {index: .2, text: rm+"m", value: rm}, {index: .1, text: rh+"h", value: rh} ]; } function interpolatehsl(a, b) { var = d3.interpolatestring(a, b); return function(t) { return d3.hsl(i(t)); }; } this resulting in 3 static concentric circles(since i'm plotting minute, seconds , hours) no transition.
i'm not sure how proceed here. change should make working? please me out.
d.value in code should in range [0, 1], need divide maximum values in fields generator:
function fields() { console.log(rs); return [ {index: .3, text: rs+"s", value: rs/60}, {index: .2, text: rm+"m", value: rm/60}, {index: .1, text: rh+"h", value: rh/24} ]; } i noticed because console.log(rs) printing out values in range of [0, 60] whereas arc.endangle expects radian value. if substitute [0, 60] endangle provider in code, on wound clock hand.
var arc = d3.svg.arc() .startangle(0) .endangle(function(d) { return d.value * 2 * math.pi; }) var width = 960, height = 800, radius = math.min(width, height) / 1.9, spacing = .09; var resp_time = 61; var rh = parseint(resp_time/3600), rm = parseint((resp_time- rh*3600)/60), rs = parseint((resp_time- rh*3600 - rm*60)%60); var color = d3.scale.linear() .range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"]) .interpolate(interpolatehsl); var t; var arc = d3.svg.arc() .startangle(0) .endangle(function(d) { return d.value * 2 * math.pi; }) .innerradius(function(d) { return d.index * radius; }) .outerradius(function(d) { return (d.index + spacing) * radius; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var field = svg.selectall("g") .data(fields) .enter().append("g"); field.append("path"); field.append("text"); d3.transition().duration(0).each(tick); d3.select(self.frameelement).style("height", height + "px"); function tick() { field = field .each(function(d) { this._value = d.value; }) .data(fields) .each(function(d) { d.previousvalue = this._value; }); field.select("path") .transition() .ease("elastic") .attrtween("d", arctween) .style("fill", function(d) { return color(d.value); }); field.select("text") .attr("dy", function(d) { return d.value < .5 ? "-.5em" : "1em"; }) .text(function(d) { return d.text; }) .transition() .ease("elastic") .attr("transform", function(d) { return "rotate(" + 360 * d.value + ")" + "translate(0," + -(d.index + spacing / 2) * radius + ")" + "rotate(" + (d.value < .5 ? -90 : 90) + ")" }); if (resp_time > 0) { resp_time = resp_time - 1; rh = parseint(resp_time/3600), rm = parseint((resp_time- rh*3600)/60), rs = parseint((resp_time- rh*3600 - rm*60)%60); t = settimeout(tick, 1000); } } function arctween(d) { console.log(d); var = d3.interpolatenumber(d.previousvalue, d.value); return function(t) { d.value = i(t); return arc(d); }; } function fields() { console.log(rs); return [ {index: .3, text: rs+"s", value: rs/60}, {index: .2, text: rm+"m", value: rm/60}, {index: .1, text: rh+"h", value: rh/24} ]; } function interpolatehsl(a, b) { var = d3.interpolatestring(a, b); return function(t) { return d3.hsl(i(t)); }; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Comments
Post a Comment