html数据透视,像HTML构造函数的数据透视类似于没有聚合来显示分组元素

我想构建一个HTML组件，它将提供一个类似于pivottable的视图对我的数据，但是使用pivotarea内的自定义html元素而不是总数或计数;在下面的示例中，我将使用一串文本，但我希望它是任何HTML元素(img，div，文本等)。像HTML构造函数的数据透视类似于没有聚合来显示分组元素

我发现很难选择一个方向，编写我自己的代码来生成它(使用jQuery)或使用像Pivottable这样的库。我尝试过后者，但甚至找不到合适的方向w.r.t.定制聚合器功能。

我可以看到自己重新使用由js pivottable生成的html(使用简单的计数)，然后在jQuery中追加项目，但这看起来像是一个相当冒险的解决方案，同时缺少自定义选项。这种方法的优点包括在某些时候我希望在web-ui中包含对colums的过滤/定制。

什么我找什么？给定一个JSON阵列与具有属性[Columngroup1，Columngroup2]和[Rowgroup 1，rowgroup2，rowgroup3]多行，我想它根据如下(建于的Tableau)来布置：

在上面的例子中，[Businessline，Type，Product]是行组，[Active_or_roadmap，Roadmap Quarter]是列组。数据集的粒度更深一层，每个“产品”可以由多个子产品组成，这些子产品应放置在“活动”列(周期头)或路线图四分之一列中。这可以通过子产品15.03和15.01在视觉上被分组在相同的“行”中看出。

我面临什么困难？

我是否使用HTML表对于这一点，我应该去的div表示行/列，或两者的组合类？增加了复杂性：在某些时候，我希望非标题列水平滚动(如果太宽)。

在我想过滤掉一些行的情况下，我应该重新生成整个表还是(错误)使用可见性：隐藏？在后一种情况下：我将如何处理被部分过滤的产品组(即，子产品15.01不应该可见，子产品15.03确实需要可见)

我会如何在DOM元素中嵌入对象细节？即在悬停/ clickevent的情况下，我怎么知道JSON对象中的哪一行对应于被点击的名称？

请注意，我不一定要找到一个答案，完全按照我上面所说的，我主要是在寻找一个方向w.r.t.代码从结构体面和灵活的方式从JSON转到上表。

任何帮助非常感谢，我有一个codepen包含一些示例数据和一个相当差的尝试。

function load_data(callback){

$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json', function(data){

callback(data)

});

}

2016-12-29

MattV