Re-added David's code for accessing individual data points in d3-line-element.co...
authordeclerambaul <fabian.kaelin@gmail.com>
Mon, 2 Jul 2012 13:50:49 +0000 (15:50 +0200)
committerdeclerambaul <fabian.kaelin@gmail.com>
Mon, 2 Jul 2012 13:50:49 +0000 (15:50 +0200)
lib/chart/chart-type.co
lib/chart/type/d3/d3-chart-element.co
lib/chart/type/d3/d3-line-element.co

index 27e99bf..2840b9d 100644 (file)
@@ -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'
index 57b53e1..29cc2a3 100644 (file)
@@ -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        
index aad93d9..51ce742 100644 (file)
@@ -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]
+
+