javascript - d3.js:如何处理附加在同一位置的 svg 元素,一个在另一个之上?

标签 javascript jquery svg d3.js

我在 svg 元素中有一个 d3 map (使用 albers 投影),我根据我拥有的每个数据点的纬度和经度向其附加圆圈。然而,一些数据点出现在相同的纬度和经度,因此元素(在本例中为圆圈)被一个接一个地附加。

我想根据同一个纬度/经度投影中是否已经存在一个圆来稍微偏移圆,或者附加另一个元素,例如一个矩形,以表明有多少数据点位于该特定投影上。

但是,我不太清楚我将如何做到这一点。谁能指出我正确的方向?是否有一种干净、简单的方式来表达:如果此位置已经有一个元素,请执行某些操作?

最佳答案

不幸的是,没有简单的方法可以做到这一点——通常,您必须遍历现有元素,检查它们中的任何一个是否与当前元素处于相同的位置。但是,您还有其他一些选择。

预处理数据

在绘图之前,遍历您的数据并在同一位置合并元素。您可以向合并数据添加另一个属性,告诉您使用另一个符号、绘制更大的圆圈或类似的东西。

使用透明度

另一种方法是使圆圈半透明。这样,同一个位置的几个圆圈整体透明度会降低,表明该位置有更多数据。

后一种解决方案最容易实现,因为它只需要设置一个属性。

关于javascript - d3.js:如何处理附加在同一位置的 svg 元素,一个在另一个之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22156496/

相关文章:

javascript - 使用 Firefox SDK API 获取当前环境的文件路径分隔符

javascript - 浏览器下载页面时是否可以显示 Twitter Bootstrap 进度条?

javascript - 为未标记的文本添加样式

object - 为什么 HTML anchor 标记不包装可缩放的 SVG <object>?

javascript - 在 d3 图上设置原点

html - 如何使用div绘制曲线?

javascript - CSS 类选择器样式未在 React 元素中应用

javascript - 当我需要阻塞调用时如何处理 Ember 中的异步属性?

javascript - 将 JSON 文件加载到 JavaScript 变量中

javascript - 停止 JavaScript 计时器和动画并恢复它们