From 32a43cf2f78a001e9ec703fd8680c7dbb4511a81 Mon Sep 17 00:00:00 2001 From: declerambaul Date: Mon, 2 Jul 2012 15:50:49 +0200 Subject: [PATCH] Re-added David's code for accessing individual data points in d3-line-element.co for future use. --- lib/chart/chart-type.co | 2 +- lib/chart/type/d3/d3-chart-element.co | 5 ++- lib/chart/type/d3/d3-line-element.co | 39 +++++++++++++++++++++++++++----- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/lib/chart/chart-type.co b/lib/chart/chart-type.co index 27e99bf..2840b9d 100644 --- a/lib/chart/chart-type.co +++ b/lib/chart/chart-type.co @@ -159,7 +159,7 @@ class exports.ChartType extends ReadyEmitter */ loadSpec: -> return this if @ready - proto = @constructor:: + proto = @constructor:: jQuery.ajax do url : @SPEC_URL dataType : 'json' diff --git a/lib/chart/type/d3/d3-chart-element.co b/lib/chart/type/d3/d3-chart-element.co index 57b53e1..29cc2a3 100644 --- a/lib/chart/type/d3/d3-chart-element.co +++ b/lib/chart/type/d3/d3-chart-element.co @@ -62,17 +62,18 @@ class exports.D3ChartElement extends ReadyEmitter */ loadSpec: -> return this if @ready - proto = @constructor:: + proto = @constructor:: jQuery.ajax do url : @SPEC_URL dataType : 'json' success : (spec) ~> - proto.spec = spec + proto.spec = spec proto.options_ordered = spec proto.options = _.synthesize spec, -> [it.name, it] proto.ready = true @triggerReady() error: ~> console.error "Error loading #{@typeName} spec! #it" + this renderChartElement: (metric, svgEl ,xScale, yScale) -> svgEl diff --git a/lib/chart/type/d3/d3-line-element.co b/lib/chart/type/d3/d3-line-element.co index aad93d9..51ce742 100644 --- a/lib/chart/type/d3/d3-line-element.co +++ b/lib/chart/type/d3/d3-line-element.co @@ -19,7 +19,7 @@ class exports.LineChartElement extends D3ChartElement D3ChartElement.register this -> super ... - + renderChartElement: (metric, svgEl ,xScale, yScale) -> X = (d, i) -> xScale d[0] @@ -37,7 +37,7 @@ class exports.LineChartElement extends D3ChartElement .enter().append "path" .attr "d", line .attr "class", (d, i) -> "metric line segment #i" - .style "stroke", metric.get 'color' + .style "stroke", metric.getColor 'color' ### Mouse Lens @@ -66,7 +66,7 @@ class exports.LineChartElement extends D3ChartElement metricLine.selectAll ".line.segment" .on "mouseover", (d, i) -> - {r,g,b} = color = d3.rgb metric.get 'color' + {r,g,b} = color = d3.rgb metric.getColor 'color' lineX = (X(d[0])+X(d[1]))/2 lineY = (Y(d[0])+Y(d[1]))/2 @@ -79,6 +79,33 @@ class exports.LineChartElement extends D3ChartElement svgEl - - - +# If instead of a line segment for each month we want to use one line segment per metric, we have to have a way of accessing the data associated with a given time step. + +# lines.attr "d", line +# .attr "class", (col, i) -> "metric line metric#i" +# .style "stroke", (col, i) -> options.colors[i] +# .each (col, i) -> +# {width} = bbox = @getBBox() +# # Add line-to-data position conversions +# @indexAtX = d3.scale.quantize() +# .domain [0, width] +# .range d3.range col.length +# @indexToPoint = (idx) -> +# @pathSegList.getItem idx + +# lines.on "mouseover", (col, i) -> +# line = root.line = this # DOM element of event +# {r,g,b} = color = d3.rgb options.colors[i] + +# # quantize mouse x-location to get for closest data-point (index into data array) +# [x,y] = root.pos = d3.mouse line +# idx = root.idx = line.indexAtX x +# {x:lineX, y:lineY} = root.pt = line.indexToPoint idx + +# lens = frame.select "g.lens" +# .data d3.select(line).data() +# .attr "transform", "translate(#lineX, #lineY)" +# lens.select "circle" .style "fill", "rgba(#r, #g, #b, 0.4)" +# lens.select "text" .text (col) -> col[idx][1] + + -- 1.7.0.4