在 Pentaho CDE 中使用 D3 图表答案

【问题标题】：Using D3 chart in Pentaho CDE在 Pentaho CDE 中使用 D3 图表
【发布时间】：2016-06-24 04:06:30
【问题描述】：

大家好

我想将此 D3 圆包装图添加到我的 Pentaho CDE - http://bl.ocks.org/mbostock/4063530。

想法是使用 D3 组件库并将其添加为 D3 组件 - 将脚本代码作为自定义图表脚本，但我不知道该怎么做。我只找到了本教程http://biwithui.blogspot.cz/2014/08/d3-chart-in-pentaho-cde.html，它专门针对带有 db 数据源的图表。我的图表使用 json 文件作为输入
d3.json("flare.json"
我相信你们中的一些人可以帮助我：
1) 如何编辑 index.html 代码，以便我可以将其作为自定义图表脚本添加到 D3 组件中？
2) 如何使用flare.json 数据输入编辑部分，这样我就可以使用我自己的json 数据源（具有相同的结构）加载了Pentaho CDE（可能类似于d3.json("#"+this.Datasource）

谢谢！

【问题讨论】：

标签： javascript d3.js svg pentaho-cde

【解决方案1】：

您可能会将 d3.select 与 d3.json 混淆。第一个选择要绑定图表的 DOM 元素，第二个加载数据并进行回调。 Pentaho 似乎要求您绑定到带有哈希标记的元素（我不熟悉 Pentaho，但这似乎是教程中的人正在做的事情）。试试：

//This will load the data into the 'data' variable
d3.json('flare.json', function(data){
    d3.select('#' + this.htmlObject)
      .data(data).enter()    //And attaching your data.
      .append(//whatever type of graph you want to create)
      ...

})

【讨论】：

【解决方案2】：

教程中有一段很关键：

function f(dataset){
    var data = this.cdaResultToD3Array(dataset);
    ...

显然，您的组件中指定的查询结果作为dataset 参数传递给D3 组件上的自定义图表脚本 挂钩。对cdaResultToD3Array 的调用可能特定于该示例并且不起作用，但您确实必须以某种特定方式操作数据集，以准备将其与您的图表代码一起使用。

然后，您可以忘记d3.json('flare.json', function (data) { ... }) 部分，只使用该函数内的代码。您的数据将绑定到元素并绘制图表。

唯一的问题是数据转换部分。您将需要调整您的数据集以使其与圆形包装代码一起使用。

提示：让它看起来与flare.json中的完全一样

【讨论】：