更新GeoJSON元素
update a GeoJSON element
我正在制作一个映射,在该映射中,我首先用GeoJSON文件定义的路径定义状态轮廓,以及一些额外的信息,如状态名称。加载后,我想根据csv中的数据填充状态并填充工具提示,使用一些按钮和复选框(年份,不同的数据子集)。
我发现,当我第二次对状态对象调用.data()时,使用csv而不是json文件,路径会消失,因为它们只存在于json中。有没有一种方法我只能更新某些变量?有没有更好的方法将状态对象绑定到动态数据?
我通常处理这一问题的方法,以及choropleth映射示例中设置代码的方法,是分别加载这两个文件,然后在需要时将数据连接到功能id上。如果按顺序加载文件,这是最简单的,如下图所示:
// make a container
var counties = svg.append("svg:g")
.attr("id", "counties");
// load the data you're showing
d3.json("unemployment.json", function(data) {
// load the geo data (you could reverse the order here)
d3.json("us-counties.json", function(json) {
// make the map
counties.selectAll("path")
.data(json.features)
.enter().append("svg:path")
.attr("d", path);
// now join the data, maybe in a separate function
update(data)
});
});
在update()
函数中,您获取数据并根据id:对地图应用操作(颜色等)
update(data) {
// look at the loaded counties
counties.selectAll("path")
// update colors based on data
.attr('fill', function(d) {
// get the id from the joined GeoJSON
var countyId = d.id;
// get the data point. This assumes your data is an object; if your data is
// a CSV, you'll need to convert it to an object keyed to the id
var datum = data[countyId];
// now calculate your color
return myColorScale(datum);
});
}
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 更新GeoJSON元素
- 获取geojson元素到html表中
- 传单:在一个层内排序GeoJSON元素