Добавление рыбьего глаза к осям с помощью D3 JS

Question

У меня есть эта визуализация, и я пытаюсь добавить вид "рыбий глаз" на график. Я попытался добавить его с помощью следующих строк в 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; });

});

Обновленный пример.