0

Here's a link of my demo! If it's not clear enough, please see this link of fisheye demo2.

fisheye.copy = function() {
  return d3_fisheye_scale(scale.copy(), d, a);
};

fisheye.nice = scale.nice;
fisheye.ticks = scale.ticks;
fisheye.tickFormat = scale.tickFormat;
return d3.rebind(fisheye, scale, "domain", "range");

I want my fisheye to move smoothly, which means when I go over the plain space, it will do fisheye also.

mdml
  • 22,442
  • 8
  • 58
  • 66
Zhang Nan
  • 21
  • 3

1 Answers1

0

Couple issues:

1.) You have a couple blank lines at the end of your tsv file, this is introducing bogus data into your plot.

2.) You've wrapped your circles in a g element. The g group is an "empty" container and doesn't receive mouse events. One trick here it to fill your empty space with an element that does, like a rect.

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
  .attr('fill','none')
  .attr('pointer-events', 'all')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("class","chartArea");

Then mouseover becomes:

d3.select(".chartArea").on("mousemove", function() {
  fisheye.focus(d3.mouse(this));
  ...

Updated example.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Yes, I noticed that before. But I simply move the .append("g"). But then, the Y axis is such a mess.(maybe you can try) But why was that? I am new to this, hope to now it more~ – Zhang Nan Nov 28 '14 at 22:48
  • @ZhangNan, you can't move the `g`, it's grouping the circles with the x-axis and y-axis. Did you look at my solution? It solves your problem. – Mark Nov 28 '14 at 23:51
  • Yes, I looked at it, it's really nice compared to mine. But did you notice that when your program comes to crowed (points) place it become slower? O, there's another question I forgot to ask, please see my demo at the up right place, there should show the number of OPP_TOT and OPP_LAND of the city point that mouse is pointing, but why it is undefined???? By the way, are u a student or a developer in company? – Zhang Nan Nov 29 '14 at 00:29
  • @ZhangNan, I don't notice any slowing but what you are asking d3.js to do is very CPU intensive, so on slower computers, it's going to be a problem. Your mouseover doesn't work because you've mapped your data to x/y using the `datum` function. See this [update](http://plnkr.co/edit/0ZtlEBGRqTOZ7arFYoRj?p=preview). – Mark Nov 29 '14 at 00:37
  • Hi, I have another problem. At the beginning, when the mouse haven't point on svg, the circles have different Radius. Once after I point the mouse on svg, the circles become the same Radius. Why is this happening? how to solve this? – Zhang Nan Dec 02 '14 at 11:42
  • @ZhangNan, your fisheye code **explicitly** resets the radius, I assumed this is what you wanted. Sounds like you want an implementation closer to the last example [here](http://bost.ocks.org/mike/fisheye/). – Mark Dec 02 '14 at 17:06