在Pentaho CDE中使用D3图表

Question

Hi guys

I would like to add this D3 Circle Packing diagram to my Pentaho CDE - http://bl.ocks.org/mbostock/4063530 .

Idea is to use D3 Components Library and add it as D3 Component - put script code as Custom chart script, but I don't know how to do this. I only found this tutorial http://biwithui.blogspot.cz/2014/08/d3-chart-in-pentaho-cde.html which is specific for diagram with db datasource. My diagram is using json file as input
d3.json("flare.json"
I believe some of you could help me with:
1) how to edit index.html code so I could add it to D3 Component as Custom chart script?
2) how to edit part with flare.json data input, so I could use my own json datasource (with same structure) loaded with Pentaho CDE (probably something like d3.json("#"+this.Datasource )

Thank you!

Answer 1

You may be confusing the d3.select with d3.json. The first picks out the DOM element you want to bind the chart to and the second loads data and takes a callback. Pentaho seems to require you to bind to a hash-tagged element (I'm not familiar with Pentaho, but that seems to be what the guys in the tutorial is doing). Try:

//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

In the tutorial, there is a part that's the key:

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

Apparently, the results from the query specified in your component are passed as the dataset argument to the Custom Chart Script hook on the D3 Component. The call to cdaResultToD3Array is probably specific to the example and will not work, but you will indeed have to manipulate the dataset in some specific way to prepare it for using with your chart code.

Then, you can forget about the d3.json('flare.json', function (data) { ... }) part, and use just the code inside that function. Your data will be bound to the elements and the chart will draw.

The only catch is the data transformation part. You will need to adapt your dataset to make it work with the circle packing code.

Tip: make it look exactly like that in flare.json