Pentaho6.1中D3可视化库的集成及数据联动的实现

1、软件环境

  • 操作系统版本：Win 10 64位
  • 可视化图形库：D3
  • Pentaho版本： biserver-ce-6.1.0.1-196

2、对D3的简单介绍

D3允许你将任意的数据绑定到文档对象模型（DOM），然后运用数据驱动转换到文档上。例如，你可以使用D3将一个数组生成一个HTML表格。或者，使用相同的数据来创建一个有平滑过渡和交互的交互式SVG条形图。

D3不是一个旨在提供每一个可能想到的功能的单一框架。相反的，D3所解决的问题的关键是：高效操作基于数据的文档。它提供了显著的灵活性，展现了web标准的全部功能，比如HTML、SVG 和 CSS。D3非常快，它以最小的开销支持大型数据集以及交互与动画的动态行为。D3的函数式风格使代码通过组件和插件的多元化集合得以重用。

3、Pentaho中引入D3图形库

  • 通过Pentaho的插件仓库Marketplace下载D3软件包，具体操作加下图：

  • 重启Pentaho软件，然后查看D3可视化库是否正确引入，见下图：

  • 如果出现上述的情况，说明D3可视化库引入成功，小编恭喜你可以进入D3的可视化编程啦！

4、D3图形间联动实战

  • 绘图效果展示和图形联动说明

通过点击右边的门店柱状图，左边的时段柱状图做相应的联动， 其中在图形之间传递的参数是门店的ID；在此处，我想要强调的是：较之于Pentaho CDE的绘图原则，D3的绘图更显得自由；Pentaho CDE绘制的图形适用于一般意义上的大数据展现，但是我们有时候需要为我们的客户定制个性化的图形，一旦图形追求个性化必然会导致我们Pentaho提供的图形的样式无法满足我们的需求，此时D3的绘图将是我们的一条出路，但由于D3的学习曲线较为陡峭，所以国内的大数据攻城狮一般会选择容易实现的图形库，譬如Echarts(https://my.oschina.net/u/2453090/blog/777048)或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文档有深入的理解。

  • 核心 技术讲解

（将在近期推出，敬请关注、、、、）

5、你不知道的D3图形库与Pentaho CDE的故事

（将在近期推出，敬请关注、、、、）

原文地址：https://www.cnblogs.com/dongshenjun/p/12175326.html

时间： 2024-10-23 13:03:19

Pentaho6.1中D3可视化库的集成及数据联动的实现的相关文章

超级好用的 Java 数据可视化库：Tablesaw

本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和使用 Tablesaw 项目.示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一款基于 Java 语言的数据可视化库开源项目--Tablesaw Tablesaw是一款 Java 的数据可视化库.它主要包括两部分:一部分是数据解析库,另一部分是数据可视化库.数据解析库主要是加载数据,对数据进行操作(转化,过滤,汇总等).数据可视化库就是

实战大数据可视化库：D3.js

实战大数据可视化库:D3.js网盘地址:https://pan.baidu.com/s/1Sir6qnU7Hdz5l3IHNjdNEQ 提取码:vmdi D3.js 是一个 JavaScript 库,它主要用于对数据的动态图表展示.通过 HTML.SVG 以及 CSS,D3 可以让数据展现得更加鲜活.D3 使得数字的图形化展示变得异常单,可以说,它是当下最强大的基于网络的数据可视化技术. 本教程理论与实践结合,力图向读者全方位地展示 D3 大数据可视化技术,帮助读者快速利用 D3 创建可视化程序

利用开发框架中的标签库集成报表工具

在项目开发中,完成数据录入后,统计分析报表是必定要出的,后期还会应客户要求出现更多的统计分析报表. 集成一个成熟的报表工具来应对各种复杂和多变的报表是最好不过的了. java的开发框架很多都利用标签库来实现表现层与业务层的分离和结合,也使java的项目开发更加简洁和易于维护.集成了struts标签库的jsp页面,标签库本身有一些判断循环的逻辑,又能方便的获取后端的数据,被大部分的java开发框架利用,jsp页面本身也不用太多的js和java的代码混合.使得表现层的代码一目了然,方便后期的维护.

Pycon 2017： Python可视化库大全

本文首发于微信公众号“Python数据之道” 前言 本文主要摘录自 pycon 2017大会的一个演讲,同时结合自己的一些理解. pycon 2017的相关演讲主题是“The Python Visualization Landscape”. 先来一张全景图镇楼~~ 看完这张图是不是有点懵? 别着急,我们一起来看看后面的阐述. python可视化库可以大致分为几类: 基于matplotlib的可视化库 基于JS的可视化库 基于上述两者或其他组合功能的库 基于matplotlib的可视化库 matp

基于Python的数据可视化库pyecharts介绍

什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 使用 pyecharts 可以生成独立的网页,也可以在 flask , Django 中集成使用.pyecharts包含的图表 Bar .Bar3D.Boxplot.EffectScatter .Funnel.G

Python机器学习之数据探索可视化库yellowbrick-tutorial

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维.陆续使用过plotly.seaborn,最终定格在了Bokeh,因为它可以与Flask完美的结合,数据看板的开发难度降低了很多. 前阵子看到这个库可以较为便捷的实现数据探索,今天得空打算学习一下.原本访问的是英文文档,结果发现已经有人在做汉化,虽然看起来也像是谷歌翻译的,本着拿来主义,少费点精力的精神,就半抄半学,还是发

在iOS中使用ZXing库

前言 ZXing(Github镜像地址)是一个开源的条码生成和扫描库(开源协议为Apache2.0).它不但支持众多的条码格式,而且有各种语言的实现版本,它支持的语言包括:Java, C++, C#, Objective-C, ActionScript和Ruby. 我上周在iOS项目开发中使用了ZXing的扫描二维码功能.在此总结一下如何将ZXing集成到已有的iOS工程中,分享给大家. 集成步骤 首先去Google Code或Github将ZXing的代码下载下来,整个工程比较大,我们只需要其

Bokeh 0.12.2rc1 发布，Python 交互式可视化库

Bokeh 0.12.2rc1 发布了,Bokeh (Bokeh.js) 是一个 Python 交互式可视化库,支持现代化 Web 浏览器,提供非常完美的展示功能(app制作ty300.com).Bokeh 的目标是使用 D3.js 样式提供优雅,简洁新颖的图形化风格,同时提供大型数据集的高性能交互功能(入门教程qkxue.net).Boken 可以快速的创建交互式的绘图,仪表盘和数据应用. 小版本更新,暂无正式的改进说明,想了解更多信息,直接查看github提交记录.

d3可视化实战03：神奇的superformula

需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的需求,例如我就遇到了这样一个需求:数据是一个复杂的对象数组,而与之绑定的图元是一个可变图形.该图形可以根据与他绑定的数据中的具体参数,在圆形.方块.三角之间切换,并且要求过渡自然. 面对这个需求,最直接的做法是把圆形.方块.三角用SVG的<circle>圆形标签,<rect>矩形标签以