Question

I have made a map in d3 for usa. Now I want to apply different color as soon as i move my mouse on the province area or from first have many colors to the map.

My code is :
 <script type="text/javascript">
      var w = 1560;
      var h = 900;
      var color = d3.scale.category10();
      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).on("mouseover", function () { d3.select(this).style("fill", "aqua"); })
        .enter().append("svg:path")
         .attr("d", path)
          .on("click", click)
          .on("click", function () { window.open("Default3.aspx") })
        .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; })
    ;


      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>

我尝试过鼠标悬停事件等一些事情，但我无法得到结果。

我也尝试使用内置功能自动显示不同的颜色。但我也无法做到这一点。我是d3的新手你能帮我吗颜色可以放在鼠标上方或首先放置。一切都会奏效。

Answer 1

你可以在你用来填充的函数（以及其他所有东西）上使用一个参数：

.data(json.features)
.on("mouseover", function (d, i) { d3.select(this).style("fill", d.color); })

颜色是json.features数组的每个字段的属性之一。在此函数中，参数d表示数据（此处为状态），i表示json.features数组中的状态索引。

在这个d3示例中，可以看到节点颜色的示例实现：http://bl.ocks.org/mbostock/4062045

在地图上显示不同的颜色或在鼠标悬停事件上显示颜色

1 个答案: