进入 D3 JS

分享于 

8分钟阅读

Web开发

  繁體

介绍

这篇文章是关于 D3.JS,的基础知识,不是完全详细的,但通过这个你至少得到了一个感觉。 本文介绍了整篇文章的基本概述,介绍了 D3.JS,的一些重要特性。创建图表和它的他细节。

大纲

  • 概述
  • 介绍
  • 功能
  • 程序
  • 图表创建
  • 演示
  • 关键点
  • 结束语

概述

如前文所述,我将带你参与 D3.JS,的旅程,并将带你介绍这个有趣的数据可以视化( 使用 d3.js )。 在本文中,我将介绍它的介绍性部分,以及如何开始。特性。过程和步骤。

各位,buckle,准备好这次旅行的旅程,这次旅程非常有趣。

介绍

定义| D3.JS

在非常简短的单词中,我们可以定义为:

"是一个用于数据可视化和图表绘制的JavaScript库。"

那么数据可视化意味着什么?

我们从社交网络。政府资源。购物门户。等等 等各种资源获得的数据通常是非结构化数据。 它可以是结构化的,也可以是扁平的。 所以所有这些数据都不是可以重用的,也不是visualizable的。

因此,可以将这种类型的粗糙数据转换为某种可用形式或者某种高效的或者可以理解的形式,可以称之为数据可视化。

数据可视化可以采用以下形式:

  • 图表( 条形图,列,饼图,直方图,线条,圆环图,等等 )
  • 图( 某种数据表示形式)
  • 其他的数据图表形式

功能

D3.JS的一些非常好且美观的特性如下:

可以重复使用

D3.JS 是可以重用的。这是它的主要特性。 你可以在创建不同类型的图表时使用 D3.JS 相同的基本功能。 你只需要在配置中做一些罕见的改变。

对于代码重用,它使用:

  • 插件
  • 组件

配置帐户

它是GitHub上的一个开源项目。 你总是欢迎配置它并根据项目功能的需要进行一些更改。

这样做太容易了。 它与所有现代可以用浏览器( IE 8 +,Chrome,Mozilla,Safari,等等 ) 工作得非常好。

可以组合

复合意味着它可以简单地由JavaScript的简单和基本函数组成。 因此,如果你对 HTML。CSS和JavaScript有了解,那么你可以做得更好。

你需要的是一些实验室和一些练习。

灵活

它也是灵活的,就像我在可以组合点上提到的那样。 因此,你可以根据项目需求使用 D3.JS,并将它的扩展到任何级别,通常是任何类型的数据( XML。JSON。CSV。等等 )。

以下是 D3.JS的一些其他功能:

  • 可以扩展
  • 可以重复
  • 易于使用
  • 交互

程序

below 图显示了使用 D3.JS 创建图表的3 个主要步骤:

图表创建

首先,我们只需要在代码片段中包括 D3.JS 功能,可以从官方网站下载它的库。


<script src=http://d3js.org/d3.v2.min.js type="text/javascript"></script>



现在,我将介绍 D3.JS.的基本结构


 <script>



 // Initialization


 d3.Chart("Chart_Type",


 {


 initialize function()


 {


 ----


 ----


 Do_Something;


 ----


 ----


 }


 });



 // chart rendering properties


 var mychart = d3.select(#container)


. append("div#is")


. chart("Chart_Type");



 // Providing data values


 myChart.draw([1,2,3,4,5]);



</script>




演示

这里,我展示了使用 D3.JS 创建简单条形图的部分演示,并使用CSV数据进行值。

HTML Fragment


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>


 <head>


 <title>Bar Chart</title>


 <meta http-equiv="X-UA-Compatible" content="IE=9">


 <link href="Style1.css" type="text/css" />



 </head>


 <body>


 <div id="chart"></div>


 <script src="http://d3js.org/d3.v2.min.js"></script>


 <script>


 function renderChart() {



 // var width = 1020,


 // height = 720,


 // Attributes


 var data = d3.csv.parse(d3.select('#csv').text());


 var valueLabelWidth = 40; // space reserved for value labels (right)


 var barHeight = 20; // height of one bar


 var barLabelWidth = 100; // space reserved for bar labels


 var barLabelPadding = 5; // padding between bar and bar labels (left)


 var gridLabelHeight = 18; // space reserved for gridline labels


 var gridChartOffset = 3; // space between start of grid and first bar


 var maxBarWidth = 420; // width of the bar with the max value



 // Accessor functions


 var barLabel = function (d) { return d['Name']; };


 var barValue = function (d) { return parseFloat(d['Salary(PM)']); };



 // Scales


 var yScale = d3.scale.ordinal().domain


 (d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);


 var y = function (d, i) { return yScale(i); };


 var yText = function (d, i) { return y(d, i) + yScale.rangeBand()/2; };


 var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);



 // Svg container element


 var chart = d3.select('#chart').append("svg")


. attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)


. attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);



-------

[ 它只是这个图表的一个示例代码 Fragment。 有关详细信息,请查看我以前的文章 http://www.codeproject.com/Tips/811446/Creating-Bar-Chart-using-D-JS。]

输出

关键点

你需要记住的D3.JS的一些要点是:

  • 开放源代码框架
  • 这是一个JavaScript库
  • 这不是一种整体方法
  • 允许代码重用
  • 这是一个可视化图书馆
  • 用于数据操作
  • 有效地使用所有浏览器
  • 使用插件和组件
  • 我们需要包括:
    
    <script src=http://d3js.org/d3.v2.min.js" type="text/javascript"></script>
    
    
    
    

结束语

我希望现在你有了使用 D3.JS. 创建数据可视化图表的基本信息,它很简单,可以重用。 更多的细节或者教程,你可以访问它的官方网站包含步骤明智的细节和描述创建不同类型的图表。

同时,如果你在创建图表或者学习 D3.JS, 时遇到任何问题,可以自由地ping我或者留言。


div