在地图上显示不同的颜色或在鼠标悬停事件时显示颜色 [英] Displaying different colors on the map or displaying color on mouse over event

问题描述

 我在d3为美国制作了地图。现在，我想要应用不同的颜色，只要我移动我的鼠标在省区或从第一次有许多颜色到地图。 
 
我的代码是：
< 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（）; //投影的默认翻译
 var s = proj.scale（）//投影的默认缩放
 
 var map = d3.select（＃vis）append（svg： svg）
 .attr（width，w）
 .attr（height，h）
 .call（d3.behavior.zoom重绘））; 
 
 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 （dv：）
 .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 path）
 .attr（class，function（d）{returnsubunit+ 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]）; 
 
 //现在我们确定投影的新缩放，但有一个问题：
 //地图不会放大鼠标点
 proj.scale（s * d3.event.scale）; 
 
 //重绘地图
 uk.selectAll（path）。attr（d，path）; 
 
 //重绘x轴
 xAxis.attr（x1，tx）.attr（x2，tx）; 
 
 //重绘y轴
 yAxis.attr（y1，ty）.attr（y2，ty）; 
} 
 
 
 
< / script> 
  

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

我也尝试使用内置函数自动显示不同的颜色。
但是我也无法得到。
我是新到d3
你能帮我。
颜色可以放在鼠标悬停事件或从第一个。

解决方案

你可以使用一个参数来填充函数/ 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

这篇关于在地图上显示不同的颜色或在鼠标悬停事件时显示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！