Pentaho6.1中D3可視化庫的集成及數據聯動的實現

一、軟件環境

• 操做系統版本：Win 10 64位
• 可視化圖形庫：D3
• Pentaho版本： biserver-ce-6.1.0.1-196

二、對D3的簡單介紹

        D3容許你將任意的數據綁定到文檔對象模型（DOM），而後運用數據驅動轉換到文檔上。例如，你可使用D3將一個數組生成一個HTML表格。或者，使用相同的數據來建立一個有平滑過渡和交互的交互式SVG條形圖。

       D3不是一個旨在提供每個可能想到的功能的單一框架。相反的，D3所解決的問題的關鍵是：高效操做基於數據的文檔。它提供了顯著的靈活性，展示了web標準的所有功能，好比HTML、SVG 和 CSS。D3很是快，它以最小的開銷支持大型數據集以及交互與動畫的動態行爲。D3的函數式風格使代碼經過組件和插件的多元化集合得以重用。

三、Pentaho中引入D3圖形庫

• 經過Pentaho的插件倉庫Marketplace下載D3軟件包，具體操做加下圖：

 

• 重啓Pentaho軟件，而後查看D3可視化庫是否正確引入，見下圖：

• 若是出現上述的狀況，說明D3可視化庫引入成功，小編恭喜你能夠進入D3的可視化編程啦！

四、D3圖形間聯動實戰

• 繪圖效果展現和圖形聯動說明

       經過點擊右邊的門店柱狀圖，左邊的時段柱狀圖作相應的聯動， 其中在圖形之間傳遞的參數是門店的ID；在此處，我想要強調的是：較之於Pentaho CDE的繪圖原則，D3的繪圖更顯得自由；Pentaho CDE繪製的圖形適用於通常意義上的大數據展示，可是咱們有時候須要爲咱們的客戶定製個性化的圖形，一旦圖形追求個性化必然會致使咱們Pentaho提供的圖形的樣式沒法知足咱們的需求，此時D3的繪圖將是咱們的一條出路，但因爲D3的學習曲線較爲陡峭，因此國內的大數據攻城獅通常會選擇容易實現的圖形庫，譬如Echarts(http://www.javashuo.com/article/p-gxqstvqs-kw.html)或HighCharts,可是這些都不是很好的選擇，掌握D3圖形庫的編程將成爲大數據攻城獅必不可少的技能，接下來咱們將經過代碼的講解對D3的可視化編程作簡單的介紹，但願的小編的這篇文章對您有所幫助！

• 核心代碼講解

       經過上文，咱們假設您已將D3組件庫集成到Pentaho,那咱們如何使用這個圖形庫喃？接下來小編將介紹這個強大的圖形庫的使用。

如上圖，它的使用更CDE的圖形庫組件沒什麼區別，與CDE繪圖有所區別的是，D3的繪圖代碼須要開發者手寫，不像CDE經過屬性設置的，具體見下圖：

時段柱狀圖代碼：

function f(dataset){
        var data = this.cdaResultToD3Array(dataset);
        var margin = {top: 50, right: 20, bottom: 30, left: 100},
            width = this.getWidth() - margin.left - margin.right - 40,
            height = this.getHeight() - margin.top - margin.bottom;
        var formatPercent = d3.format("/1000K");
        var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1, .5);
        var y = d3.scale.linear()
            .range([height, 0]);
        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(formatPercent);    
        var svg = d3.select("#"+this.htmlObject).append("svg")
            .classed("svg-container", true) //container class to make it responsive
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", "0 0 600 400")
            .classed("svg-content-responsive", true)        
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        
        data.forEach(
            function(d) {
                d.ItemSaleAmt = +d.ItemSaleAmt;
            }
        );
        x.domain(data.map(function(d) { return d.HourNo; }));
        y.domain([0, d3.max(data, function(d) { return d.ItemSaleAmt; })]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("時段銷售額");       
        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.HourNo); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.ItemSaleAmt); })
            .attr("height", function(d) { return height - y(d.ItemSaleAmt); });           
        function resize(e){
            var width = $('#HourNoHtmlObj').width(); 
            var height = $('#HourNoHtmlObj').height();      
            svg.attr('width', width);
            svg.attr('height', height);
            force.size([width, height]).resume();
        }
}

門店柱狀圖代碼：

function f(dataset){
    var data = this.cdaResultToD3Array(dataset);
    console.log(data);
    var margin = {top: 50, right: 20, bottom: 30, left: 100},
        width = this.getWidth() - margin.left - margin.right - 10,
        height = this.getHeight() - margin.top - margin.bottom;
    var formatPercent = d3.format(".00");
    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1, .2);
    var y = d3.scale.linear()
        .range([height, 0]);
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(formatPercent);
    var svg = d3.select("#"+this.htmlObject).append("svg")
            .classed("svg-container", true) 
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", "0 0 600 400")
            .classed("svg-content-responsive", true)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    
    data.forEach(
        function(d) {
            d.Amount = +d.Amount;
        }
    );
    
    x.domain(data.map(function(d) { return d.Name; }));
    y.domain([0, d3.max(data, function(d) { return d.Amount; })]);
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);    
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("門店銷售額");    
    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.Name); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.Amount); })
        .attr("height", function(d) { return height - y(d.Amount); });   
    svg.selectAll(".bar").on("click", function(d/*,event*/) {
        if($("#HourNoHtmlObj > svg").length > 0){
            $('#HourNoHtmlObj svg').remove();
            Dashboards.fireChange('OutletId', d.Id);
        }else{
            Dashboards.fireChange('OutletId', d.Id);
        }
    });    
}

小編第一次看到D3的編碼風格非常不習慣，可是經過查看D3的官方文檔（https://github.com/d3/d3/wiki）慢慢習慣了這種編程習慣，小編在這裏建議你們多查看API文檔，小編的這篇博文僅僅是起到了對D3的可視化編程的簡單瞭解，若想要深刻D3編程，須要對D3的API文檔有深刻的理解。

• 核心 技術講解

（將在近期推出，敬請關注、、、、）

五、你不知道的D3圖形庫與Pentaho CDE的故事

（將在近期推出，敬請關注、、、、）