你可以使用一个参数来填充函数/ p>

  .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

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>

I tried few things like mouse over event, but I am unable to get the result.

I also tried using the inbuilt function for automatically displaying different colors. But also I am unable to get that. I am new to d3 Would you please help me. Color can be placed on mouse over event or from first. Anything would work.

You can just use an argument on the function you use to fill (and for everything else):

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

With color being one of the properties of each field of the json.features array. In this function, the argument d represents the data (here the state), and i represents the index of the state in the json.features array.

An example implementation can be seen for the color of the nodes in this d3 example: http://bl.ocks.org/mbostock/4062045