0

このビジュアライゼーションがあり、魚眼ビューをチャートに追加しようとしています。関数に次の行を追加しようとしました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);
        });
    });

これを解決する方法についてのアイデアはありますか?

ありがとう！

4

1 に答える 1

1

まず第一に、あなたのd3.timer走りは止まらない。これにより、マシンが狂ってしまい（CPU 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; });

次に、複数のステップでデータをプロットしているため、魚眼レンズのすべての円を選択する必要があります。そして 3 番目に、ポイントを実際に拡大および縮小するコードを忘れていました。

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; });

});

例を更新しました。

于 2015-07-04T23:53:06.453 に答える