在Pentaho CDE中使用D3圖表

Question

嗨，大家好

我想將此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數據輸入來編輯零件，因此我可以使用加載了Pentaho CDE的我自己的json數據源（結構相同）（可能類似於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的調用可能是特定於該示例的，將無法正常工作，但是您確實必須以某種特定方式操縱數據集，以准備將其與圖表代碼配合使用。

然后，您可以忘記d3.json('flare.json', function (data) { ... })部分，而僅使用該函數中的代碼。 您的數據將綁定到元素，然后將繪制圖表。

唯一的問題是數據轉換部分。 您將需要調整數據集以使其與圓包裝代碼一起使用。

提示：使其與flare.json外觀完全一樣