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. CTF_论剑场 名侦探柯南

    首先看一下是一个压缩包然后下载 解压后会发现一个图片和另一个压缩包 打开图片 发现是这个 用HxD分析一下这张图片通过搜索 zip jpg...... 然后会发现这张图片里有一个png 图片 所以判断 ...

  2. Spring - jdbcTemplate - 调试代码: PreparedStatementCreator 生成的语句, update 之后没有 自增id, 已解决

    1. 概述 解决 jdbcTemplate 下, update 结果不带 自增id 的问题 2. 场景 看书 Spring in Action 5th 3.1.4 listing 3.10 saveT ...

  3. shim是什么?

    Vue响应式原理中说道:Object.defineProperty是Es5中无法shim的特性,那么这里的shim是什么呢? shim可以将新的API引入到旧的环境中,而且仅靠就环境中已有的手段实现. ...

  4. GIL/Copy/私有/面向对象

    1. GIL Python语言和GIL没有关系.仅仅是由于历史原因在Cpython虚拟机(解释器),难以移除GIL. GIL:全局解释器锁.每个线程在执行的过程都需要先获取GIL,保证同一时刻只有一个 ...

  5. js的基本分类(0.1)

    js分内嵌,内联,外部样式表三种, js的组成分,ES(变量,函数,对象,数组,判断,循环),BOM(浏览器对象模型),DOM(文档对象模型), js的五种输出语句,alert(警告框),confir ...

  6. Java的JAVA_HOME、Path、CLASSPATH环境变量小结,可以借助这三个的配置去理解Oracle中的那几个环境变量的配置作用

    问题:在哪里都能执行java命令,是和JAVA_HOME变量有关系呢还是path中指定的那个java路径呢?? 刚学Java的时候,很多jdk配置教程都要求设置JAVA_HOME.Path.CLASS ...

  7. 使用node.js实现多人聊天室(socket.io、B/S)

    通过B/S架构实现多人聊天,客户端连接服务器,发送信息,服务器接收信息之后返回给客户端. 主要是通过socket.io实现浏览器和服务器之间进行实时,双向和基于事件的通信. socket.io官方文档 ...

  8. Bugku-CTF加密篇之凯撒部长的奖励(就在8月,超师傅出色地完成了上级的特遣任务,凯撒部长准备给超师傅一份特殊的奖励.......)

    凯撒部长的奖励 就在8月,超师傅出色地完成了上级的特遣任务,凯撒部长准备给超师傅一份特殊的奖励,兴高采烈的超师傅却只收到一长串莫名的密文,超师傅看到英语字串便满脸黑线,帮他拿到这份价值不菲的奖励吧. ...

  9. springMVC的概念

    1,完成一次web请求的过程 Web浏览器发起请求 Web服务器接收请求并处理请求,最后产生响应(一般为html).web服务器处理完成后,返回内容给web客户端,客户端对接收的内容进行处理并显示出来 ...

  10. 网络辅助北斗/GPS位置服务平台业务量突破10亿次

    导读 北斗卫星导航系统日渐成熟,相关服务也在逐步丰富.深入.为了推动北斗定位功能在手机中的普及,中国信息通信研究院2017年就发布了网络辅助北斗/GPS位置服务平台,支持95%以上商用芯片及终端的北斗 ...