Question

我在d3为美国制作了一张地图。我正在为每个州的美国塑造形象。当我在任何状态下移动鼠标时，它会告诉我该形状的名称。现在我希望如果我点击任何状态，我应该转到其他页面。我该怎么做？这是可能的，Actualy我想在点击该状态时显示每个州的地图。我该如何移动到其他页面？

显示美国地图的代码是

  <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的新手。

Answer 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后面的所有内容都将封装在此标记内。

点击map-d3后移动到其他页面

1 个答案: