blob: e44b4803ab607bcdc91982a582ed1bfadf898500 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
# Static stacked area chart implementation using d3.
class Epoch.Chart.Area extends Epoch.Chart.Plot
constructor: (@options={}) ->
@options.type ?= 'area'
super(@options)
@draw()
# Generates a scale needed to appropriately render the stacked visualization.
# @return [Function] The y scale for the visualization.
y: ->
a = []
for layer in @getVisibleLayers()
for own k, v of layer.values
a[k] += v.y if a[k]?
a[k] = v.y unless a[k]?
d3.scale.linear()
.domain(@options.range ? [0, d3.max(a)])
.range([@height - @margins.top - @margins.bottom, 0])
# Renders the SVG elements needed to display the stacked area chart.
draw: ->
[x, y, layers] = [@x(), @y(), @getVisibleLayers()]
@g.selectAll('.layer').remove()
return if layers.length == 0
area = d3.svg.area()
.x((d) -> x(d.x))
.y0((d) -> y(d.y0))
.y1((d) -> y(d.y0 + d.y))
stack = d3.layout.stack()
.values((d) -> d.values)
data = stack layers
layer = @g.selectAll('.layer')
.data(layers, (d) -> d.category)
layer.select('.area')
.attr('d', (d) -> area(d.values))
layer.enter().append('g')
.attr('class', (d) -> d.className)
layer.append('path')
.attr('class', 'area')
.attr('d', (d) -> area(d.values))
super()
|
