2

again I am struggling with d3.js. I have a working Line Chart and partially working mouseover. The goal is to limit the mouseover solely to the svg element, like Mark has it working in his answer Multiseries line chart with mouseover tooltip

I have created a Plunker with it. My is-situation is like that. http://plnkr.co/edit/Jt5jZhnPQy4VpjwY3YBv?p=preview

And I have tried things like: http://plnkr.co/edit/lRMfa0OiDWEXWYBAjoPd?p=preview by adding: 

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

But it's always pushing the circles and the bar out of the chart, I am fiddling for some days now and would be extremely glad if someone happens to point me in the right direction.

Thank you in advance.

Community
  • 1
  • 1
joeysql1
  • 47
  • 5

2 Answers2

1

Instead of giving width as width :

mouseG.append('svg:rect') 
.attr('width', width)

do this (give the width of the group same as domain x for the line chart)

mouseG.append('svg:rect') 
.attr('width', w - padding * 2)

Reason:

var xScale = d3.time.scale()
    .domain([xExtents[0], xExtents[1]])
    .range([padding, w - padding * 2]);

Your width of the x scale is w - padding * 2 so the width of the group listening to the mouse event should be same.

working code here

Cyril Cherian
  • 32,177
  • 7
  • 46
  • 55
1

Here is the plunker:

http://plnkr.co/edit/MEtbBqN5qr82yr0CNhUN?p=preview

I simply changed the size of your rectangle:

mouseG.append('rect')
.attr("x", margin.left)
.attr("y", margin.top)
.attr('width', w - margin.left - margin.right) 
.attr('height', height - margin.bottom - margin.top)

PS: I don't know if you want the line limited to the chart area as well, but if you want, this is the plunker: http://plnkr.co/edit/RP4uYKBYnHtX1SvYsLKq?p=preview

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171