Question

我有一个MapBox地图（使用TileMill创建），包含大约800个多边形（人口普查区）。我已将地图加载到HTML页面上。此页面上还有一个D3.js图表。有一个下拉菜单引用了相同的800个人口普查区域;当选择一个时，图表会更改以显示CSV文件中该行的数据（从D3.js example构建）。

我需要做的是找不到办法，这就是制作这张地图，以便在地图上点击道（多边形）时，它会更新变量（地图在地图中命名为“TRACTCE10”））这样图表也会发生变化。我认为这可以通过更新下拉列表（我可以稍后隐藏）或直接更改D3 javascript中的变量来完成。

我试过的最新方法是由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

Answer 1

而不是：

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

Leaflet不做这个==数据比喻 - 做

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

相反

在Mapbox中单击多边形时设置JS变量

1 个答案: