Добавление рыбий глаз к осям с D3 JS

Question

У меня есть this visualization, и я пытаюсь добавить рыбий вид на диаграмму. Я пытался добавить его следующие строки в функции plotData но этого не происходит:

var fisheye = d3.fisheye.circular() 
      .radius(120); 

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

     circle.each(function (d) { 
      d.fisheye = fisheye(d); 
     }); 
    }); 

Любые идеи о том, как решить эту проблему?

Спасибо!

Answer 1

Прежде всего, ваш d3.timer никогда не останавливается. Это приводит к тому, что моя машина сходит с ума (100%) и убивает производительность фиши. Я действительно не уверен, что вы там делаете, поэтому игнорируйте это на мгновение.

Ваш рыбий жир нуждается в небольшом массаже. Во-первых, он ожидает, что позиции вашего пикселя данных будут сохранены в атрибутах d.x и d.y. Вы можете фальсифицировать это с при рисовании кругами:

 circle 
     .attr("cx", function(d, i) { d.x = X(d[0]); return d.x; }) 
     .attr("cy", function(d, i){ d.y = Y(d[1]); return d.y; }); 

Во-вторых, вы замышляют свои данные в несколько этапов, так что вам нужно, чтобы выбрать все круги для Рыбий глаз. И третье, вы забыли код, который делает точку расти и сокращаться:

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

    // select all the circles 
    d3.selectAll("circle.data").each(function(d) { d.fisheye = fisheye(d); }) 
     // make them grow and shrink and dance 
     .attr("cx", function(d) { return d.fisheye.x; }) 
     .attr("cy", function(d) { return d.fisheye.y; }) 
     .attr("r", function(d) { return d.fisheye.z * 4.5; }); 

}); 

Изменено example.