d3.jsd3.js入门


备注

D3.js是一个用于根据数据操作文档的JavaScript库。 D3可帮助您使用HTML,SVG和CSS将数据变为现实。 D3强调Web标准,为您提供现代浏览器的全部功能,而无需将自己与专有框架联系起来,将强大的可视化组件和数据驱动方法结合到DOM操作中。

官方网站: https//d3js.org/这里有很多例子: http//bl.ocks.org/mbostock

版本

发布日期
V1.0.0 2011-02-11
2.0 2011-08-23
3.0“Baja” 2012年12月21日
V4.0.0 2016年6月28日
V4.1.1 2016年7月11日
V4.2.1 2016年8月3日
v4.2.2 2016年8月16日
v4.2.3 2016年9月13日
V4.2.4 2016年9月19日
V4.2.5 2016年9月20日
v4.2.6 2016年9月22日
v4.2.7 2016年10月11日
v4.2.8 二○一六年十月二十○日
V4.3.0 2016年10月27日

你好,世界!

创建包含此代码段的.html 文件:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

d3.select("body").append("span")
    .text("Hello, world!");

</script>
 

请参阅此JSFiddle中的此片段。

安装

有多种方法可以下载和使用D3。

直接脚本下载

  1. 下载并解压缩d3.zip
  2. 将生成的文件夹复制到保存项目依赖项的位置
  3. 在HTML中引用d3.js(用于开发)或d3.min.js(用于生产): <script type="text/javascript" src="scripts/d3/d3.js"></script>

NPM

  1. 如果您还没有在项目中初始化NPM: npm init
  2. NPM安装D3: npm install --save d3
  3. 在HTML中引用d3.js(用于开发)或d3.min.js(用于生产): <script type="text/javascript" src="node_modules/d3/build/d3.js"></script>

CDN

  1. 在HTML中引用d3.js(用于开发)或d3.min.js(用于生产): <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>

Github上

  1. 从Github获取任何版本的d3.js(用于开发)或d3.min.js(用于生产): <script type="text/javascript" src="https://raw.githubusercontent.com/d3/d3/v3.5.16/d3.js"></script>

要直接链接到最新版本,请复制以下代码段:

<script src="https://d3js.org/d3.v4.min.js"></script>
 

简单的条形图

的index.html

<!doctype html>
<html>
  <head>
    <title>D3 Sample</title>
  </head>
  <body>
    <!-- This will serve as a container for our chart. This does not have to be a div, and can in fact, just be the body if you want. -->
    <div id="my-chart"></div>

    <!-- Include d3.js from a CDN. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>

    <!-- Include our script that will make our bar chart. -->
    <script type="text/javascript" src="chart.js"></script>
  </body>
</html>
 

chart.js之

// Sample dataset. In a real application, you will probably get this data from another source such as AJAX.
var dataset = [5, 10, 15, 20, 25]

// Sizing variables for our chart. These are saved as variables as they will be used in calculations.
var chartWidth = 300
var chartHeight = 100
var padding = 5

// We want our our bars to take up the full height of the chart, so, we will apply a scaling factor to the height of every bar.
var heightScalingFactor = chartHeight / getMax(dataset)

// Here we are creating the SVG that will be our chart.
var svg = d3
  .select('#my-chart')           // I'm starting off by selecting the container.
    .append('svg')               // Appending an SVG element to that container.
    .attr('width', chartWidth)   // Setting the width of the SVG.
    .attr('height', chartHeight) // And setting the height of the SVG.

// The next step is to create the rectangles that will make up the bars in our bar chart.
svg
  .selectAll('rect')                                          // I'm selecting all of the rectangles in the SVG (note that at this point, there actually aren't any, but we'll be creating them in a couple of steps).
  .data(dataset)                                              // Then I'm mapping the dataset to those rectangles.
  .enter()                                                    // This step is important in that it allows us to dynamically create the rectangle elements that we selected previously.
    .append('rect')                                           // For each element in the dataset, append a new rectangle.
      .attr('x', function (value, index) {                    // Set the X position of the rectangle by taking the index of the current item we are creating, multiplying it by the calculated width of each bar, and adding a padding value so we can see some space between bars.
          return (index * (chartWidth / dataset.length)) + padding
        })
      .attr('y', function (value, index) {                    // Set the rectangle by subtracting the scaled height from the height of the chart (this has to be done becuase SVG coordinates start with 0,0 at their top left corner).
        return chartHeight - (value * heightScalingFactor)
      })
      .attr('width', (chartWidth / dataset.length) - padding) // The width is dynamically calculated to have an even distribution of bars that take up the entire width of the chart.
      .attr('height', function (value, index) {               // The height is simply the value of the item in the dataset multiplied by the height scaling factor.
        return value * heightScalingFactor
      })
      .attr('fill', 'pink')                                   // Sets the color of the bars.

/**
 *  Gets the maximum value in a collection of numbers.
 */
function getMax(collection) {
  var max = 0

  collection.forEach(function (element) {
    max = element > max ? element : max
  })

  return max
}
 

示例代码可从https://github.com/dcsinnovationlabs/D3-Bar-Chart-Example获得

可在https://dcsinnovationlabs.github.io/D3-Bar-Chart-Example/获得演示

简单D3图表:Hello World!

将此代码粘贴到空HTML文件中,然后在浏览器中运行。

<!DOCTYPE html>

<body>

<script src="https://d3js.org/d3.v4.js"></script>    <!-- This downloads d3 library -->

<script>
//This code will visualize a data set as a simple scatter chart using d3. I omit axes for simplicity.
var data = [        //This is the data we want to visualize. 
                    //In reality it usually comes from a file or database.
  {x: 10,    y: 10},
  {x: 10,    y: 20},
  {x: 10,    y: 30},
  {x: 10,    y: 40},
  {x: 10,    y: 50},
  {x: 10,    y: 80},
  {x: 10,    y: 90},
  {x: 10,    y: 100},
  {x: 10,    y: 110},
  {x: 20,    y: 30},
  {x: 20,    y: 120},
  {x: 30,    y: 10},
  {x: 30,    y: 20},
  {x: 30,    y: 30},
  {x: 30,    y: 40},
  {x: 30,    y: 50},
  {x: 30,    y: 80},
  {x: 30,    y: 90},
  {x: 30,    y: 100},
  {x: 30,    y: 110},
  {x: 40,    y: 120},
  {x: 50,    y: 10},
  {x: 50,    y: 20},
  {x: 50,    y: 30},
  {x: 50,    y: 40},
  {x: 50,    y: 50},
  {x: 50,    y: 80},
  {x: 50,    y: 90},
  {x: 50,    y: 100},
  {x: 50,    y: 110},
  {x: 60,    y: 10},
  {x: 60,    y: 30},
  {x: 60,    y: 50},
  {x: 70,    y: 10},
  {x: 70,    y: 30},
  {x: 70,    y: 50},
  {x: 70,    y: 90},
  {x: 70,    y: 100},
  {x: 70,    y: 110},
  {x: 80,    y: 80},
  {x: 80,    y: 120},
  {x: 90,    y: 10},
  {x: 90,    y: 20},
  {x: 90,    y: 30},
  {x: 90,    y: 40},
  {x: 90,    y: 50},
  {x: 90,    y: 80},
  {x: 90,    y: 120},
  {x: 100,    y: 50},
  {x: 100,    y: 90},
  {x: 100,    y: 100},
  {x: 100,    y: 110},
  {x: 110,    y: 50},
  {x: 120,    y: 80},
  {x: 120,    y: 90},
  {x: 120,    y: 100},
  {x: 120,    y: 110},
  {x: 120,    y: 120},
  {x: 130,    y: 10},
  {x: 130,    y: 20},
  {x: 130,    y: 30},
  {x: 130,    y: 40},
  {x: 130,    y: 50},
  {x: 130,    y: 80},
  {x: 130,    y: 100},
  {x: 140,    y: 50},
  {x: 140,    y: 80},
  {x: 140,    y: 100},
  {x: 140,    y: 110},  
  {x: 150,    y: 50},
  {x: 150,    y: 90},
  {x: 150,    y: 120},
  {x: 170,    y: 20},
  {x: 170,    y: 30},
  {x: 170,    y: 40},
  {x: 170,    y: 80},
  {x: 170,    y: 90},  
  {x: 170,    y: 100},
  {x: 170,    y: 110},
  {x: 170,    y: 120},
  {x: 180,    y: 10},
  {x: 180,    y: 50},
  {x: 180,    y: 120},
  {x: 190,    y: 10},
  {x: 190,    y: 50},
  {x: 190,    y: 120},
  {x: 200,    y: 20},
  {x: 200,    y: 30},  
  {x: 200,    y: 40},
  {x: 210,    y: 80},
  {x: 210,    y: 90},
  {x: 210,    y: 100},
  {x: 210,    y: 110},  
  {x: 210,    y: 120},
  {x: 220,    y: 80},  
  {x: 220,    y: 120},
  {x: 230,    y: 80},  
  {x: 230,    y: 120},
  {x: 240,    y: 90},
  {x: 240,    y: 100},  
  {x: 240,    y: 110},
  {x: 270,    y: 70},
  {x: 270,    y: 80},
  {x: 270,    y: 90},
  {x: 270,    y: 100},  
  {x: 270,    y: 120}
];

//The following code chains a bunch of methods. Method chaining is what makes d3 very simple and concise.
d3.select("body").append("svg").selectAll()  //'d3' calls the d3 library
                                             //'.select' selects the object (in this case the body of HTML)
                                             //'.append' adds SVG element to the body
                                             //'.selectAll()' selects all SVG elements
    .data(data)                              //'.data' gets the data from the variable 'data'
  .enter().append("circle")                  //'.enter' enters the data into the SVG 
                                             //the data enter as circles with '.append("circle")'
    .attr("r", 3)                            //'.attr' adds/alters atributes of SVG, 
                                             //such as radius ("r"), making it 3 pixels
    .attr("cx", function(d) { return d.x; }) //coordinates "cx" (circles' x coordinates)
    .attr("cy", function(d) { return d.y; }) //coordinates "cy" (circles' y coordinates)
    .style("fill", "darkblue");              //'.style' changes CSS of the SVG
                                             //in this case, fills circles with "darkblue" color

</script>
 

这是图表的JSFiddle

您还可以从GitHub下载已创建的HTML文件。

学习d3的下一步可以跟随Mike Bostock(d3的创建者)教程从头开始创建条形图

什么是D3?数据驱动的文档。

我们都习惯名称D3.js,它可能忘了D3实际上是DDD(d ata- d里文d ocuments)。这就是D3做得很好,DOM(文档对象模型)操作的数据驱动方法:D3将数据绑定到DOM元素,并根据有界数据操作这些元素。

让我们看一下这个例子中D3的一个非常基本的特征。在这里,我们不会附加任何SVG元素。相反,我们将使用页面上已存在的SVG,如下所示:

<svg width="400" height="400">
    <circle cx="50" cy="50" r="10"></circle>
    <circle cx="150" cy="50" r="10"></circle>
    <circle cx="210" cy="320" r="10"></circle>
    <circle cx="210" cy="30" r="10"></circle>
    <circle cx="180" cy="200" r="10"></circle>
</svg>
 

这是一个非常基本的SVG,有5个圆圈。现在,这些圈子并没有“绑定”任何数据。我们来看看这最后的指控:

在我们的代码中,我们写道:

var svg = d3.select("svg");
var circles = svg.selectAll("circle");
console.log(circles.nodes());
 

这里, d3.select("svg") 返回一个包含<svg width="400" height="400"></svg> 标签的d3对象和所有子标签,即<circle> 。请注意,如果页面上存在多个svg 标记,则仅选择第一个。如果你不想这样,你也可以按标签id选择,比如d3.select("#my-svg") 。 d3对象具有内置的属性和方法,我们将在以后使用它们。

svg.selectAll("circle")<svg> 标记内的所有<circle></circle> 元素创建一个对象。它可以搜索多个图层,因此标记是直接子图标并不重要。

circles.nodes() 返回包含其所有属性的circle标记。

如果我们看一下控制台并选择第一个圆圈,我们会看到这样的东西:

在此处输入图像描述

首先,我们有attributes ,然后是childNodes ,然后是children ,但是没有数据。

让我们绑定一些数据

但是,如果我们将数据绑定到这些DOM元素会发生什么?

在我们的代码中,有一个函数创建一个具有两个属性xy 的对象,带有数值(此对象在数组中,请检查下面的小提琴)。如果我们将这些数据绑定到圈子......

circles.data(data);
 

如果我们检查控制台,我们将会看到这一点:

在此处输入图像描述

我们在attributes 之前有了新的东西!名为__data__ 东西......看起来: xy 的值都在那里!

例如,我们可以根据这些数据更改圆圈的位置。看看这个小提琴

这就是D3最擅长的:将数据绑定到DOM元素并根据有界数据操作这些DOM元素。