3

私はd3を初めて使用し、マップ内のポリゴンにカーソルを合わせたときに表示されるプロパティ（ "NAME"）を取得する方法を理解しようとしています。に沿って何かをしなければならないことは承知していますが.on("mouseover", function(d,i) { some function that returns properties.NAME }、そこからどこに行けばいいのかわかりません。これが書かれたjsで、これはNAMEプロパティを各ポリゴンに静的に配置します。

        <script>

        var width = 950,
        height = 650;

        var projection = d3.geo.albers()
        .scale(120000)
        .center([22.85, 40.038]);

        var path = d3.geo.path()
        .projection(projection);

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

        d3.json("newnabes.json", function(error, topology) {
                var nabes = topojson.object(topology, topology.objects.temp);

                svg.selectAll("path")
                .data(nabes.geometries)
                .enter().append("path")
                .attr("d", path);

                svg.selectAll(".subunit-label")
                .data(nabes.geometries)
                .enter().append("text")
                .attr("class", function(d) { return "subunit-label " + d.id; })
                .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
                .attr("dy", ".35em")
                .text(function(d) { return d.properties.NAME; });
            });

        </script>

これがjsonの小さなチャンクです

{"type":"Topology",
  "transform":{
  "scale":[0.00003242681758896625,0.000024882264664420337],
  "translate":[-75.28010087738252,39.889167081829875]},
  "objects":{
    "temp":{
      "type":"GeometryCollection",
      "geometries":[{
         "type":"Polygon",
         "id":1,
         "arcs":[[0,1,2,3,4,5,6]],
         "properties":{"NAME":"Haddington"}
       },{
         "type":"Polygon",
         "id":2,
         "arcs":[[7,8,9,10,-3,11]],
         "properties":{"NAME":"Carroll Park"}
       }...

ありがとう

4

1 に答える 1

4

だから私はそれを理解しました、礼儀：円のマウスオーバーにデータを表示する

最も簡単な解決策は、名前をsvgtitle属性に追加することです。

svg.selectAll("path")
 .data(nabes.geometries)
 .append("svg:title")
 .attr("class", function(d) { return "path " + d.id; })
 .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
 .attr("dy", ".35em")
 .text(function(d) { return d.properties.NAME; });

問題に対するよりスタイリッシュな解決策をまだ調査しています（例：ほろ酔い）。

于 2013-01-27T21:18:45.340 に答える