javascript - Why is there a difference in the way that D3 processes a hex colour code vs. a colour name during locally-hosted transitions? -
i working on d3 map, , indicated several large cities in u.s. using circle svg elements. pretty standard. transitioned both circle size (i.e., radius, or "r" attribute) , circle colour. oddly enough, found when used html colour name, "deeppink", colour transition occurred immediately, whereas size transition took time specified (1000ms). when used hex code colour — #ff1493 — transitioned without issues. know why case?
the first code example below version colour changes gradually, transitioning blue pink @ same time
svg.selectall("circle") .transition() .delay(300) .duration(1000) .ease("circle") .style({ "fill": "#ff1493", "stroke": "white", "opacity": 0.9, "stroke-width": 0.7 }) .attr({ "cx": function(d) { circlexcoord = projection([d.lon, d.lat])[0]; return circlexcoord}, "cy": function(d) { circleycoord = projection([d.lon, d.lat])[1]; return circleycoord}, "r": function (d) { return rscale(parsefloat(d.value));} })
in second example, colour transition occurs @ once after 300ms delay while radius transition occurs expected.
svg.selectall("circle") .transition() .delay(300) .duration(1000) .ease("circle") .style({ "fill": "deeppink", "stroke": "white", "opacity": 0.9, "stroke-width": 0.7 }) .attr({ "cx": function(d) { circlexcoord = projection([d.lon, d.lat])[0]; return circlexcoord}, "cy": function(d) { circleycoord = projection([d.lon, d.lat])[1]; return circleycoord}, "r": function (d) { return rscale(parsefloat(d.value));} })
the difference between 2 code snippets, literally, fill value — one's hex code , other colour name. why happen?
edit: note when copied code gist , viewed block (http://bl.ocks.org/iblind/c15096f98636dcce7428), result didn't manifest, , worked normal. when i'd hosted things locally using python's simplehttpserver, aberration above became noticeable. realize narrows scope of question somewhat, if knows why sort of behaviour affected hosting locally vs. using blocks, i'd interested hear it.
Comments
Post a Comment