Question

嗨伙计们

我想将这个D3 Circle Packing图添加到我的Pentaho CDE中 - http://bl.ocks.org/mbostock/4063530。

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

谢谢！

Answer 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)
      ...

})

Answer 2

在教程中，有一个部分是关键：

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

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

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

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

提示：使其看起来与flare.json
中的完全相同

在Pentaho CDE中使用D3图表

2 个答案: