javascript - d3 等值线 : changing data without reloading map

标签 javascript d3.js

我正在使用 d3(更像是学习使用)来创建等值线图。我已经设法加载我的数据和 geojson 对象并获得要显示的 map ,但我想添加一些转换和用户选择数据的能力。

这是我目前所拥有的示例(感谢 github 和 Mike Bostock 的 gist 查看器):

http://bl.ocks.org/4131166 ;和 http://gist.github.com/4131166

我已经设法通过将关联类更改为组来更改颜色,但我将其交换为 Cynthia Brewer 颜色的 js 版本,因为我想在它们之间进行转换。我还希望颜色在选择不同的“波段”时发生变化。

我认为我的问题在于 updateValues 函数 - 它做的太多了。它一次性加载数据、绘制多边形和填充颜色。

是否可以绘制多边形,然后在单独的函数中关联颜色?

我曾考虑过添加一个:

.attr("id", function(d) { return d.id; })

到绘制路径的语句,然后以某种方式使用它在单独的语句中链接到数据,但我不太确定我将如何实现这一点 - 我想以某种方式检索每个路径的 id 并链接到数据...?

如有任何帮助,我们将不胜感激。即使那是关于如何改进我的代码的建议。我总是乐于遵守相关的最佳实践。

最佳答案

d3 的核心是解决方案。任何时候你执行 d3.selectAll( ... ).data( ... ) 你得到的是一个选择

要影响选择中的每个节点,您可以链接各种 d3 函数。

还有两个其他特殊函数可以链接子选择:用于新节点的 enter() 和用于不再存在的节点的 exit()

如果你更新底层数据,那么你调用顶层d3.selectAll( ... ).data( ... ) 并且DOM节点将根据这三个链进行更新: 选择(所有节点),进入(添加节点),& 退出(删除节点)。

因此,在选择链上设置您的颜色,而不是输入,它们会自动更新。

关于javascript - d3 等值线 : changing data without reloading map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13520879/

相关文章:

javascript - map 方法中的散布算子复制对象时的使用方法

javascript - 如何在可变的 fetchr 应用程序中增加 ajax 请求超时长度?

d3.js - 如何将GIS栅格转换为矢量多边形?

javascript - 为什么 SVG 元素的 SVG 属性有时显示为可访问,有时则不可访问?

javascript - 这个 2 行 jquery 可以缩短为 1 行吗?

javascript - 资源文件(css 和 js)未在 safari 中加载

javascript - 系统关闭时 localStorage 未被清除

javascript - 使用 d3.js 以 3x3 格式绘制多个圆圈

javascript - 在 D3.js 中强制布局中的动画对象

javascript - D3js 选择所有文本