1

私はこのコードを持っています:

    d3.json("world-countries.json", function(collection) {
      feature = svg.selectAll("path")
          .data(collection.features)
          .enter().append("svg:path")
          .on("mouseover", function(d) { d3.select(this).style("fill",
                "#ffffff"); })
          .on("mouseout", function(d) { d3.select(this).style("fill",
                "#000000"); })
          .on("click", click)
          .attr("d", clip);

次に、私の「クリック」機能は

    function click() {
        var o1 = projection.invert(d3.mouse(this));
        var lat = o1[0]
        lon = o1[1];
        console.log([o1]);
        projection.origin([o1]);
        circle.origin([o1]);
        refresh();
    }

ここにデモがありますhttp://bl.ocks.org/2876083

svg をクリックすると、マップが消えます。

地球が「クリック」ポイントを中心に回転するようにするにはどうすればよいですか?

4

1 に答える 1

1

http://bl.ocks.org/johan/1392560に投稿した例では

発見できる：

function mousemove() {
    if (m0) {
        var m1 = [d3.event.pageX, d3.event.pageY]
          , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
        projection.origin(o1);
        circle.origin(o1);
        refresh();
    }
}

変更する必要がありますo1。

event.pageXはマウスの水平位置です (水平方向の変化を計算するために使用されます)。

event.pageYマウスの垂直位置です。

o1[horizo​​ntal,vertical]マップの新しい中間点です。これは、古いマップの中間点とマウス位置 の差(古い - 新しい)を使用して計算されます。

var m1 = [d3.event.pageX, d3.event.pageY]
  , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
于 2015-05-12T05:25:50.947 に答える