Установите переменную JS при нажатии на полигон в Mapbox

У меня есть карта MapBox (созданная с использованием TileMill) с примерно 800 полигонами (переписными трактами). Я загрузил карту на HTML-страницу. Также на этой странице представлен график D3.js. Существует раскрывающееся меню, которое ссылается на те же самые 800 переписных участков; когда он выбран, диаграмма изменяется, чтобы отобразить данные из этой строки в файле CSV (построенном из примера D3.js).

То, что мне нужно сделать, и не может найти способ сделать, заключается в том, чтобы сделать эту карту так, что, когда на карте щелкнут тракт (полигон), он обновляет переменную (тракт называется "TRACTCE10" на карте), так что диаграмма также изменяется. Я думаю, что это можно сделать, либо обновив раскрывающийся список (который затем я могу скрыть позже), либо напрямую изменив переменную в javascript D3.

Последний метод, который я попробовал, был предложен поддержкой MapBox, но не работает:

map.gridLayer.on('mousemove',function() { dispatch.tractchange(tractById.get(this.TRACTCE10)); });

Это полный код:

<div class="infobar">Info
    <div class="chart">
      <h1>Vehicle Ownership</h1>
        <div id="va_chart"></div>
    </div>
    <div id="TRACTCE10"></div>
  </div>
        <script>

var dispatch = d3.dispatch("load", "tractchange");

var groups = [
  "0 vehicles",
  "1 vehicle",
  "2 vehicles",
  "3+ vehicles"
];

d3.csv("data.csv", type, function(error, tracts) {
  if (error) throw error;
  var tractById = d3.map();
  tracts.forEach(function(d) { tractById.set(d.id, d); });
  dispatch.load(tractById);
  dispatch.tractchange(tractById.get("010100"));
});

// Drop-down menu for selecting a tract; uses the "menu" namespace.
dispatch.on("load.menu", function(tractById) {
  var select = d3.select("#va_chart")
    .append("div")
    .append("select")
      .on("change", function() { dispatch.tractchange(tractById.get(this.value)); });

  select.selectAll("option")
      .data(tractById.values())
    .enter().append("option")
      .attr("value", function(d) { return d.id; })
      .text(function(d) { return d.id; });

  dispatch.on("tractchange.menu", function(state) {
    select.property("value", state.id);
  });
});

// A pie chart to show population by age group; uses the "pie" namespace.
dispatch.on("load.pie", function(tractById) {
  var width = 200,
      height = 200,
      radius = Math.min(width, height) / 1.9;

  var color = d3.scale.ordinal()
      .domain(groups)
      .range(["#fdbb84", "#fc8d59", "#e34a33", "#b30000"]);

  var arc = d3.svg.arc()
      .outerRadius(radius - 50)
      .innerRadius(radius - 10);

  var pie = d3.layout.pie()
      .sort(null);

  var svg = d3.select("#va_chart").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var path = svg.selectAll("path")
      .data(groups)
    .enter().append("path")
      .style("fill", color)
      .each(function() { this._current = {startAngle: 0, endAngle: 0}; });

  dispatch.on("tractchange.pie", function(d) {
    path.data(pie.value(function(g) { return d[g]; })(groups)).transition()
        .attrTween("d", function(d) {
          var interpolate = d3.interpolate(this._current, d);
          this._current = interpolate(0);
          return function(t) {
            return arc(interpolate(t));
          };
        });
  });
});

// Coerce population counts to numbers and compute total per state.
function type(d) {
  d.total = d3.sum(groups, function(k) { return d[k] = +d[k]; });
  return d;
}

var ddl = document.getElementsByTagName("input");
ddl.setAttribute("id", "ddlinput");

</script>

И Mapbox JS:

<div id='map'></div>
<script type='text/javascript'>
  var map = L.mapbox.map('map', 'transitized.68dk8798');

  map.gridLayer
    .on('mousemove',function() { dispatch.tractchange(tractById.get(this.TRACTCE10)); });


</script>

Полный код можно найти на github: https://github.com/shaunjacobsen/chicagocommutes