使用 D3.js 为地图着色

Question

我是 StackOverflow 的新手，刚开始使用 D3。 我需要在地图上显示值。我看到this question 和我应该做的很相似。

我想要根据Date 列中的值将国家/地区着色为 CSV，并根据用户选择的年份（单选按钮）。 我该怎么做？

我创建了一个灰度等级并将它们包含在一个数组中，然后我创建了一个方法chooseColor(value)，它根据该年国家/地区的值返回正确的颜色。 我认为这不是做这件事最有效的方法......

另外，在我的 CSV 中，并非所有国家/地区都在欧盟。例如，我没有关于俄罗斯的数据，所以我“关闭”了一些国家/地区，在 mouseover 的活动中添加了 if。 但我也会在地图上切掉俄罗斯的一部分，以扩大已知国家。我怎么也能做那件事？

我查看了这些示例：Mike Bostock 在 bl.ocks.org 上的 Choropleth 和 Threshold Choropleth，但我不知道如何为国家/地区着色...... （我想放链接，但由于我的声誉低，我不能发布超过 2 个链接）

This is my code。

我为我糟糕的英语道歉。谢谢大家，

码头

编辑

我承认我没有理解您代码中的某些内容。

1. 为什么我需要事件on mouseover 和mouseout？ hover 和 rhover 是什么？我以为它们是与this question 相关的事件。但就我而言，我不需要它，不是吗？
2. 使用array_values 或d 是一样的，对吧？如果我使用d 或array_values 不会改变，对吧？这是一个愚蠢的问题，但让我很困惑。

3. 我用这种方式修改了makemap方法。我正确理解如何使用您的代码？

   function makemap(error, europe, desease) { dess = dessease.slice(); 县 = topojson.feature(europe, europe.objects.collection);

   vector = svg.selectAll("path")
       .data(counties.features)
       .enter()
       .append("path")
       .attr("class", "county")
       .attr("id", function(d) { 
           return "coun" + d.properties.indx;
       })
       .attr("d", path)
       .style("fill", function(array_values) {
           return color(array_values[d.country]);
       });
   

在这种情况下，当然有关于d 的错误。对不起，我不知道我错在哪里......

Answer 1

国家的颜色将取决于一个值。所以颜色是“价值”的函数。为此，您必须根据您的值定义颜色范围：

var color = d3.scale.linear()
                      .domain([mn,mx])      // <--- min and MAX of your value
                      .range(["#ffffff","000000"]);

然后定义您所在国家/地区的颜色：

svg.selectAll(".county")
                  .style("fill", function(array_values) {
                        return color(array_values[d.country]);
                  });

必读：Jerome Cukier - d3: scales, and color