0

米国の d3 でマップを作成しました。私はすべての州で米国の形をとっています。マウスを任意の状態に移動すると、その形状の名前が表示されます。ここで、任意の状態をクリックすると、他のページに移動する必要があります。どうすればいいですか？これは可能ですか、実際には、その州をクリックすると、各州の地図が表示されます。別のページに移動するにはどうすればよいですか?

usaを表示する地図のコードは

  <script type="text/javascript">
      var w = 1560;
      var h = 900;
      var proj = d3.geo.mercator();
      var path = d3.geo.path().projection(proj);
      var t = proj.translate(); // the projection's default translation
      var s = proj.scale() // the projection's default scale

      var map = d3.select("#vis").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .call(d3.behavior.zoom().on("zoom", redraw));

      var axes = map.append("svg:g").attr("id", "axes");

      var xAxis = axes.append("svg:line")
        .attr("x1", t[0])
        .attr("y1", 0)
        .attr("x2", t[0])
        .attr("y2", h);

      var yAxis = axes.append("svg:line")
        .attr("x1", 0)
        .attr("y1", t[1])
        .attr("x2", w)
        .attr("y2", t[1]);

      var uk = map.append("svg:g").attr("id", "uk");
 d3.json("tryusa.json", function (json) {
          uk.selectAll("path")
          .data(json.features)
        .enter().append("svg:path")
         .attr("d", path)
        .append("svg:title")
        .text(function (d) { return d.properties.name; })

      });
      svg.selectAll(".subunit")
    .data(topojson.object(uk, uk.objects.subunits).geometries)
  .enter().append("path")
    .attr("class", function (d) { return "subunit " + d.id; })
    .attr("d", path);

      function redraw() {
          var tx = t[0] * d3.event.scale + d3.event.translate[0];
          var ty = t[1] * d3.event.scale + d3.event.translate[1];
          proj.translate([tx, ty]);

          // now we determine the projection's new scale, but there's a problem:
          // the map doesn't 'zoom onto the mouse point'
          proj.scale(s * d3.event.scale);

          // redraw the map
          uk.selectAll("path").attr("d", path);

          // redraw the x axis
          xAxis.attr("x1", tx).attr("x2", tx);

          // redraw the y axis
          yAxis.attr("y1", ty).attr("y2", ty);
      }
  </script>

tryusa.json という名前の json ファイルがあります。このjsonファイルで地図を表示しています。他のページに移動したいのですが？どうすればよいですか？出来ますか ？他の方法はありますか？私が使用しているプラ​​ットフォームは C# です。私を助けてください。私は本当にd3が初めてです。

4

1 に答える 1

1

コメントで提供したコードを考慮すると、次のようになります。

d3.json("tryusa.json", function (json) { 
    uk.selectAll("path")
    .data(json.features) 
    .enter().
    .append("svg:path")
    .attr("d", path)
    .attr("Response.Redirect", "Default.aspx")
    .append("svg:title")
    .text(function (d) { return d.properties.name; })
    .on("click", function () { window.open("Default3.aspx") }) 
});

onしたがって、ここで要素にリスナーを追加しますsvg:title。したがって、ツールチップなどをクリックする必要があります。onしたがって、リスナーをパスに配置するだけでよいと思います。

d3.json("tryusa.json", function (json) { 
    uk.selectAll("path")
    .data(json.features) 
    .enter().
    .append("svg:path")
    .attr("d", path)
    .attr("Response.Redirect", "Default.aspx")
    .on("click", function () { window.open("Default3.aspx") })
    .append("svg:title")
    .text(function (d) { return d.properties.name; }) 
});

より正確には、背後appendにあるすべてがこのタグ内にカプセル化されます。

于 2013-03-20T02:07:18.017 に答える