我在几个地方看到过这种条形图。这是来自LinkedIn。页面比较复杂。
当您单击一个栏时，它会重新计算并重新排序其他列中的栏。在这里，单击 San Fran。
在 d3 中有这样的例子吗？
它有什么具体的名字吗？
最佳答案
一般来说，这称为分面搜索，它会生成支持可视化的数据。下面描述了这两个部分，即数据和可视化，以及一些指向集成 D3.js/ElasticSearch 示例的链接。
数据:分面搜索/聚合
数据通过计算一组项目的方面来生成直方图。传统上，这是(有效地)作为全文搜索引擎(如 Lucene 和 ElasticSearch(基于 Lucene 构建))中的分面搜索完成的。 ElasticSearch 现在将此功能称为聚合。数据的计算速度足够快，可以实时进行搜索。
在 LinkedIn 示例中，您将创建一个人员搜索索引，其中包含所列字段。然后使用分面搜索，您可以轻松获取每个分面值的文档(人)计数。在您的查询中，您也可以说您想要说出前 x (10) 个最受欢迎的值。
有关详细信息，请参阅以下链接。第一个更详细，第二个和第三个级别更高。
- Lucene Faceted Search User's Guide
- ElasticSearch Documentation on Facets
- ElasticSearch Documentation on Aggregations (new approach)
可视化:水平条形图
获得数据后，可视化是按最高计数排序和可以使用多种方式生成的简单水平条形图的组合。以下链接直接使用 D3.js 或 NVD3.js，这是一个用于制作常用图表的帮助库。为了获得预期的效果，您可能需要使用更新的参数将点击链接到新搜索。
综合示例
以下是使用 D3.js 和分面搜索/聚合的预构建集成的一些链接。
关于d3.js - D3 : Is there a name for this type of chart and code example?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30832683/