mirror of https://github.com/vitalif/dimple
parent
01db7e5c30
commit
81a0f2c465
|
@ -22,7 +22,9 @@
|
|||
var indicatorColor = indicator.defaultColors[2];
|
||||
|
||||
// The frame duration for the animation in milliseconds
|
||||
var frame = 750;
|
||||
var frame = 2000;
|
||||
|
||||
var firstTick = true;
|
||||
|
||||
// Place the indicator bar chart to the right
|
||||
indicator.setBounds(434, 49, 153, 311);
|
||||
|
@ -73,12 +75,9 @@
|
|||
s.shapes
|
||||
.attr("rx", 10)
|
||||
.attr("ry", 10)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke)
|
||||
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
|
||||
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
|
||||
.style("opacity", 0.4);
|
||||
svg.selectAll("rect.Jan-12")
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
|
||||
// Draw the main chart
|
||||
var bubbles = new dimple.chart(svg, data);
|
||||
|
@ -121,18 +120,15 @@
|
|||
|
||||
// On tick of the main charts storyboard
|
||||
function onTick(e) {
|
||||
if (!firstTick) {
|
||||
// Color all shapes the same
|
||||
s.shapes
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke);
|
||||
// Then color the selected shape differently
|
||||
svg.selectAll("rect." + e)
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
|
||||
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
|
||||
}
|
||||
firstTick = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -19,7 +19,9 @@
|
|||
var indicatorColor = indicator.defaultColors[2];
|
||||
|
||||
// The frame duration for the animation in milliseconds
|
||||
var frame = 750;
|
||||
var frame = 2000;
|
||||
|
||||
var firstTick = true;
|
||||
|
||||
// Place the indicator bar chart to the right
|
||||
indicator.setBounds(434, 49, 153, 311);
|
||||
|
@ -70,12 +72,9 @@
|
|||
s.shapes
|
||||
.attr("rx", 10)
|
||||
.attr("ry", 10)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke)
|
||||
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
|
||||
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
|
||||
.style("opacity", 0.4);
|
||||
svg.selectAll("rect.Jan-12")
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
|
||||
// Draw the main chart
|
||||
var bubbles = new dimple.chart(svg, data);
|
||||
|
@ -118,18 +117,15 @@
|
|||
|
||||
// On tick of the main charts storyboard
|
||||
function onTick(e) {
|
||||
if (!firstTick) {
|
||||
// Color all shapes the same
|
||||
s.shapes
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke);
|
||||
// Then color the selected shape differently
|
||||
svg.selectAll("rect." + e)
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
|
||||
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
|
||||
}
|
||||
firstTick = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue