2

この例では、コードを拡張しています。

http://bl.ocks.org/mbostock/5914438

しかし、ズームに統合できるように、このマップにポイントを配置する方法がわかりません。パスは正常に機能しますが、変更された投影を使用してポイントの座標を投影することはできないようです。ズームされた関数では、ポイントを含む要素に適用すると、transform() への scale() の追加がスケーリングされるようですポイントが非常に大きいため、画面全体に表示されます。ここに私の追加のポイントがあります：

var sitesG = svg.append("g").attr("id","sitesG");
var osites = sitesG.selectAll(".sites")
 .data(sites)
 .enter()
 .append("g")
 .attr("transform", function(d) {return "translate(" + projection([d.x,d.y]) + ")scale(" + projection.scale() + ")"})

osites.append("circle").attr("r", 10)

そして、これが zoomed() の関数です:

d3.select("#sitesG")
  .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")

サイトの個々の要素でもこれを試しましたが、成功しませんでした。geo.tile にポイントを配置する例はありますか?

4

1 に答える 1

2

私はそれを理解することができました。私の主な問題は、ポイントを適切に投影しているときに、円の「r」属性を zoom.scale() に一致するようにスケーリングしていなかったため、半径が 13,000px+ になったことです。

ここで動作することがわかります: http://bl.ocks.org/emeeks/6147081

于 2013-08-03T16:50:53.797 に答える