在 d3.js 地图中添加交互性时出现问题 [下拉菜单]

Question

我想制作地图作为定量分析的输出。 我有多个变量要添加到我的地图中，并且我不想有 n 个输出，在本例中为 n 个地图。您可以查看简化的数据框（列是年份，但也可以是一组不同的变量）： 简单数据框

在我看来 d3.js 是个好主意，因为它可以显示 1带有下拉菜单的地图，用户可以选择变量。

我之前用d3.js制作了一张地图，我用它作为模板。我已经让它变得安静、基本和简单（非常小的数据集等），你可以在这个 repo GitHub 中找到它： https://github.com/Mathiaslauber/Without_interactivity

这是我第一次尝试实现的 Github 存储库互动性 https://github.com/Mathiaslauber/Interactivity_first_try 或者，如果您愿意，我刚刚制作了一个 FiddleJS 来让事情变得更容易： Fiddle JS 交互性首次尝试

这是一个更大项目的一部分，如果你愿意的话你可以看看。 GithubPages

到目前为止，我已经进行了绝望的修改，但仍然不成功，因为示例通常在很多方面都非常不同，所以对我来说很难重现。我对 JavaScript 中的函数实现很陌生，而且很糟糕。 以下两个链接是看起来并不复杂并启发了我的示例：

[A] http://tietyk.github.io/D3/Prototype/part9-9.html

[B] http://bl.ocks.org/rgdonohue/6a30b731230f6e242a54

我在第196行有一堆有趣的代码下面的-226，也在js文件中。 问题是我缺少让它发挥作用的线索。

使用的第一个来自来源 [A]，它基于悬停效果。 二、来自来源[B]和使用的按钮 两者都引用了 json 属性，我使用 Csv。总体格式和功能实现不同。

我可能会花一个月的时间来尝试自己解决这个问题。因此，如果您有任何提示，它将对我有很大帮助：我应该检查的内容、我的代码中缺少的内容等。

 // 2 bunch of codes that were used in order to add interactivity     

    /*        
       color();
               
       d3.selectAll("input").on("change", function() {
           attribute = this.id;
           color();
       });

       function color(){
           
           d3.selectAll('circle')
               .transition()
               .attr( "fill", function(d){
                   return (mycolor.domain())}  
                           )
       }
       
       */
    /*  
        var timeline = d3.selectAll(".time-series")
        .on("mouseover", function(d, i) {
          year = i;
          svg.selectAll("path")
            .attr("class", quantify);
          d3.selectAll(".time-series")
            .attr("class", "time-series");
          this.className = "time-series active";
        });
    */