javascript - 使用文本框进行交叉过滤

标签 javascript d3.js dc.js

我一直在谷歌搜索,但我似乎无法找到一个关于将交叉过滤与文本框一起使用的好例子。

我正在尝试使用交叉过滤器在数据表上添加文本框过滤。

目前正在关注此代码库 http://bl.ocks.org/d3noob/6077996

阅读这个 wiki 并没有多大帮助

https://github.com/square/crossfilter/wiki/API-Reference

我知道有人问了一个问题,但是解决方案太短了,我无法复制它

Crossfilter filter based on textbox

最佳答案

我不确定您的项目进展到什么程度,所以我只能针对您可以进一步调查的事情提供广泛的建议。

  • 在使用 crossfilter.js 过滤维度之前,您需要注册该维度。在您找到的示例中,这就是当 var magValuevar timeDimensionvar depthValue 时正在执行的操作var volumeByDay 变量被初始化。
  • 如果您还没有,您需要监听字符何时插入到您的文本框中。这可以通过监听 keyup 的事件监听器来完成。事件。当监听器注册一个keyup事件时,可以触发对应维度的过滤函数。
  • 在 crossfilter.js 中使用 myDimension.filter(value) 函数时,它会过滤精确值、范围或函数,具体取决于传递的是简单变量还是数组,或功能。在示例中,您发现这似乎由 dc.js 处理,但在 Stack Overflow 和您引用的 API 中,这是通过与预实例化维度交互来手动处理的。 如果精确匹配是你想要的,那么你可以直接从你的文本框中传递内容。如果你想要更模糊的标准,你可以使用类似 Levenshtein distance 的东西(例如通过 this npm package )在调用 myDimension.filter(value) 时传递一个函数。

让我知道这是否对您有帮助(或没有帮助)。如果您可以分享您目前拥有的代码,我可以更具体地解决您的问题。

关于javascript - 使用文本框进行交叉过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54762911/

相关文章:

javascript - 如何生成只有 7 个字符的 UID 并排除像 imgur.com 这样的重复

javascript - 即使使用 Bostock 的换行功能,文本也不会换行在 d3 SVG 元素中

javascript - 使用过渡动画时数据系列的 D3 渲染不完整

javascript - 为什么这段代码可以计算列表中的一个项目而不是其他项目?

javascript - 启用禁用按钮 html5/css/javascript

javascript - 难倒在 JS 纪元转换上

javascript - 单击时将图标添加到 HTML 按钮

javascript - D3.js 栏未显示

javascript - 使用链接过滤 DC.js 表?

javascript - 尝试呈现数据 d3 crossfilter dc.js BarChart。图表已绘制,但它是空的