From b8dd31af9fa0cf52df97568cdf4548318bd36a66 Mon Sep 17 00:00:00 2001 From: declerambaul Date: Sat, 23 Jun 2012 13:51:55 +0200 Subject: [PATCH] Added mouseover event for the circles on a line. --- lib/chart/type/d3/d3-line-chart-type.co | 20 ++++++++++++++++---- 1 files changed, 16 insertions(+), 4 deletions(-) diff --git a/lib/chart/type/d3/d3-line-chart-type.co b/lib/chart/type/d3/d3-line-chart-type.co index 5df711a..6c67ead 100644 --- a/lib/chart/type/d3/d3-line-chart-type.co +++ b/lib/chart/type/d3/d3-line-chart-type.co @@ -170,14 +170,26 @@ class exports.LineChartType extends ChartType 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() + lens = frame.select "g.lens" .attr "transform", "translate(#lineX, #lineY)" lens.select "circle" .style "fill", "rgba(#r, #g, #b, 0.4)" - lens.select "text" .text (col) -> col[idx][1] - + lens.select "text" .text -> col[idx][1] + points.on "mouseover", (d, i) -> + line = root.line = this.line # this is the DOM element of point + {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" + .attr "transform", "translate(#lineX, #lineY)" + lens.select "circle" .style "fill", "rgba(#r, #g, #b, 0.4)" + lens.select "text" .text -> d[idx] + svg -- 1.7.0.4