2015-11-17 4 views
0

Я пытаюсь использовать эффект Fisheye.js на большой диаграмме Тильфолда-Рейнгольда (~ 4000 объектов). Эффект, на который я нацелился, - это что-то вроде this example.D3.js Fisheye.js странное поведение mousemove

Я должен использовать Fisheye.js неправильно, так как мой пример, похоже, не влияет на нужный узел или текст (вообще).

https://jsfiddle.net/Nyquist212/7b7q9ra9/

Может кто-нибудь сказать мне, что я делаю неправильно?

svg.on("mousemove", function() { 

fisheye.focus(d3.mouse(this)); 

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

node.selectAll("circle") 
    .attr("cx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("cy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 10; }); 

node.select("text") 
    .attr("dx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("dy", function(d) { return d.fisheye.y - d.y; }); 

}); 

ОБНОВЛЕНО: цель состоит в том, чтобы нацелить каждый узел и связанный текст описания, чтобы сделать их более читаемыми.

+0

в своем коде вы делаете фишай ко всем узлам, когда 'мыши moves'. Итак, что вы хотите на одном узле или всего, когда движется мышь? ??? также только радиус узла получает 10 из 2. пожалуйста, дайте дополнительную информацию. – Hashy

+0

@Hashy Я пытаюсь применить искажения fisheye к каждому узлу и соответствующую текстовую метку, чтобы сделать более удобочитаемым. – Colin

+1

См. Этот вопрос [здесь] (http://stackoverflow.com/questions/20840226/transformation-issues-when-implementing-fisheye-distortion-in-a-radial-tree). Gotta сделать рыбий глаз играть хорошо с радиальной компоновкой ... – Mark

ответ

0

@Mark - Спасибо за ссылку на this post

@ Peter- Спасибо за часть текста этикетки.

Мне удалось заставить его работать, комбинируя два.

http://fiddle.jshell.net/Nyquist212/w05nkyry/3/

+0

Это действительно здорово. Не забудьте принять этот ответ, чтобы помочь другим найти правильное решение. – Peter

0

Я играл со своей скрипкой. Я заметил, что переменная svg не то, что предлагает ее название. И мне также удалось увеличить размер текстов. Это все еще немного странно, но я думаю, что он ближе к вашей цели.

d3.select("svg").on("mousemove", function() { //here 

fisheye.focus(d3.mouse(this)); 

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

node.selectAll("circle") 
    .attr("cx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("cy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 10; }); 

node.select("text") 
    .attr("dx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("dy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("style", function(d){return "font-size :"+d.fisheye.z*10+"px";}); //here 

}); 

https://jsfiddle.net/7b7q9ra9/23/

+0

спасибо! Это действительно близко. Поведение мыши, похоже, каким-то образом перевернуто ... – Colin

Смежные вопросы