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的故事

(将在近期推出,敬请关注、、、、)

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

  1. 超级好用的 Java 数据可视化库:Tablesaw

    本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和使用 Tablesaw 项目.示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出 ...

  2. Pycon 2017: Python可视化库大全

    本文首发于微信公众号“Python数据之道” 前言 本文主要摘录自 pycon 2017大会的一个演讲,同时结合自己的一些理解. pycon 2017的相关演讲主题是“The Python Visua ...

  3. Python可视化库

    转自小小蒲公英原文用Python可视化库 现如今大数据已人尽皆知,但在这个信息大爆炸的时代里,空有海量数据是无实际使用价值,更不要说帮助管理者进行业务决策.那么数据有什么价值呢?用什么样的手段才能把数 ...

  4. Bokeh 0.9.0dev 发布,交互式可视化库

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

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

    背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维.陆续使用过plotly ...

  6. AIR32F103(五) FreeRTOSv202112核心库的集成和示例代码

    目录 AIR32F103(一) 合宙AIR32F103CBT6开发板上手报告 AIR32F103(二) Linux环境和LibOpenCM3项目模板 AIR32F103(三) Linux环境基于标准外 ...

  7. 在iOS中使用ZXing库[转]

    前言 ZXing(Github镜像地址)是一个开源的条码生成和扫描库(开源协议为Apache2.0).它不但支持众多的条码格式,而且有各种语言的实现版本,它支持的语言包括:Java, C++, C#, ...

  8. xcode中的第三方库配置问题总结

    xcode中的第三方库配置总结 在导入第三方库的时候,总是会遇到许多的问题.在这里,我记录一下学到的一些知识点.写得比较乱.只要是想要记录下来,在第三方库导入的时候,遇到的一些问题. 参考网址: ht ...

  9. d3可视化实战03:神奇的superformula

    需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...

随机推荐

  1. 小白艰难的Python图像的绘制

    1.贪吃蛇 代码: import turtle turtle.setup(650,350) turtle.penup() turtle.fd(-250) turtle.pendown() turtle ...

  2. Euler Sums系列(五)

    \[\Large\displaystyle \sum_{n=1}^{\infty} \frac{\widetilde{H_n}}{n^{3}}\] where \(\widetilde{H_n}\) ...

  3. Hello 2020D(多重集)

    如果有一对时间对在某一场馆有时间重合而这一对时间对在另一场馆没有时间重合,则输出NO,否则输出YES. #define HAVE_STRUCT_TIMESPEC #include<bits/st ...

  4. python获取进程id号:

    python获取进程id号: os.getpid()获取当前进程id os.getppid()获取父进程id

  5. 一周搞定模拟电路P2_二极管介绍_记录

    1 稳压二极管 1.1 稳压二极管伏安特性曲线 ΔIz 这一段为能够达到比较好的稳压效果的稳压电流. 1.2 两种连接方法的比较 2 整流二极管 2.1 特点 用于把交流电变成脉动直流电 3 开关二极 ...

  6. 在ubuntu永久添加alias

    1. cd 进入家目录 操作如下: cd ~ 2.显示隐藏文件 操作如下:ls -al 3.vim打开.bashrc 操作如下: vim .bashrc 4.按a编辑添加alias example=' ...

  7. RTT学习之启动流程

    总结RT-Thread的启动流程. 非运行时与运行时的image文件分别是什么样的,请画下来.是谁将 RW 段中的  RW-data(初始化的全局变量)搬运到 RAM 中? MDK环境下各种数据段存储 ...

  8. HDU 1312 Red and Black(经典DFS)

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1312 一道很经典的dfs,设置上下左右四个方向,读入时记下起点,然后跑dfs即可...最后答 ...

  9. mysql取出字段数据的精度

    $field = 'convert(avg(mood),decimal(4,0)) mood,convert(avg(hrv),decimal(4,0)) hrv,convert(avg(heart_ ...

  10. 画风清奇!看看大佬怎么玩Python

    一提到Python,不少人脑海里都会浮现出几个关键词"数据分析""网络爬虫""人工智能"等,但Python的用法,远不止这些.让我们看看国内 ...