Question

在此页面上： http://public.johnnyotoole.fastmail.fm/county_map.html 我有一个基于geoJson的地图和一个基于CSV文件的表。每个SVG地图元素的Id与表中每个县的rowIndex和Name匹配。

使用http://bl.ocks.org/mbostock/4699541中的示例，如果您点击地图中的某个县，则会放大该县。这是通过click（）函数完成的。当用户点击数据表中的一行时，我想调用click（）函数来放大相应的县，但我不知道如何选择合适的项目来传递到click（d）。

在地图定义中，单击（）调用如下...

g.selectAll("path")
  .data(json.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("class", "feature")
  .on("click", click)

...所以我想这会将用户点击的数据元素传递给click（）函数。单击表格行时，如何选择要传递给click（）的相应元素？

我尝试了以下选择器的变体，但没有快乐：

d3.select("path.Feature[id='5']")

非常感谢任何帮助。

谢谢，约翰

Answer 1

查看您的代码，您完成了大部分工作。正如您在代码中指出的那样，您需要将csv链接到tableRowClicked函数中的json数据。但是，在我们这样做之前，我们需要做一些工作。

我们需要向表格单元格而不是表格行添加一个click事件，因为我们已经附加了数据（您可以在表格行中添加一些数据，然后添加click事件，但是代码没有这样设置）。所以我将以下内容添加到单元格变量中：

 .on("click", function (d) { tableRowClicked(d); });

这将为tableRowClicked函数提供县名。我们现在需要的只是json数据。为了使json数据可用，我创建了一个全局jsonOutside，然后在d3.json调用中将json数据传递给它。然后只是循环遍历jsonOutside直到使用以下内容在tableRowClicked函数内完成的县匹配：

jsonOutside.features.forEach(function (d) { // loop through json data to match td entry
    if (x.value === d.properties.name) {
        var county = d;
        click(d); // pass json element that matches td data to click 
    };

这会将json数据中的正确元素传递给click，但是，click需要稍加修改。所有内容都使用id或county进行标识，因此d3.select调用被修改为：

d3.select("#"+d.properties.name).classed("active", active = d);

顺便说一下，我真的很喜欢你在这里所做的事情，我一直想做类似的事情。我也想在Bl.ocks上发布我的解决方案，所以让我知道这是否正常（使用完整的代码也可能更有意义）。

我注意到的最后一件事是你两次调用referendum_results.csv。这可以通过在第一个d3.csv调用中包含表内容或者通过创建类似于我对json数据所做的全局来避免。您还可以通过将结果组合到GIS中的geojson数据中来完全避免使用csv文件。然后可以使用json数据填充表。

希望这有帮助。

d3 - 通过单击表格行缩放到SVG地图元素的边界框

1 个答案: