D3.js 选择

JavaScript025

D3.js 选择,第1张

D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性: d3.select 和 d3.selectAll 。

这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素,并采用 CSS 选择器字符串的形式(例如 div.item , #my-chart 或 g:first-child )。

[//]: .classed 是一个 boolean.

除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text , .html 您还可以传入一个函数。例如:

该函数接受两个参数,通常命名为 d 和 i 。第一个参数 d 是 连接数据 (或“数据”)。 i 是选择中元素的 索引

此方法有两个参数:第一个是指定事件类型的字符串第二个是触发事件时调用的函数(“回调函数”)。此回调函数有两个参数,通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。

最常见的事件包括(有关详细信息,请参阅 MDN 事件参考):

在事件回调函数中, this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下操作:

[//]:这 this 是一个 DOM 元素,而不是 D3 选择,因此如果您想使用 D3 修改它,您必须首先使用 d3.select(this) .

.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。

.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素,则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。

.insert 类似于 .append 但它允许我们指定第二个参数, 该参数指定(作为 CSS 选择器)在哪个元素之前插入新元素

.remove 从页面中 删除选择中的所有元素 。例如,给定一些圆圈,您可以使用以下方法删除它们:

大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如:

该 .each 方法允许您为 选择的每个元素 调用一个函数。

回调函数有两个参数,通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。

这是一个示例, .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数,并相应地修改圆:

该 .call 方法允许调用一个函数, 选择本身 作为第一个参数传递给该函数。

.call 在您想要对选择进行操作的可重用函数时很有用。

例如, colorAll 获取一个选区并将选区元素的填充设置为橙色:

您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数,它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回,因此您可以继续链接选择方法。

在此示例中,您过滤偶数元素并将它们着色为橙色:

通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数,通常是 a 和 b ,它们代表被比较的两个元素的数据。如果比较器函数返回负数, a 将放在前面 b ,如果是正数, a 将放在后面 b 。

D3是别人开发的一个js框架,D3里面主要是开发的一个像柱状图,线性图,你直接调用他的类库就行 了,也就是D3.JS。也就是用js和jq写的,所以说,你只要会了js和jq,然后看别人D3的开发文档,就知道怎么调用D3了。

1、模拟数据

// 模拟100条0-100的随机数,作为柱状图的高度

var data = Array.apply(0, Array(100)).map(function() {

 return Math.random() * 100

})

2、创建SVG容器

var margin = {top: 20, right: 20, bottom: 30, left: 50},

   width = document.body.clientWidth - margin.left - margin.right,

   height = 500 - margin.top - margin.bottom

var chart = d3.select('body')

 .append('svg')

 .attr('width', width + margin.left + margin.right)

 .attr('height', height + margin.top + margin.bottom)

 .append('g')

 .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')

chart就是最终建立的容器,下面就往容器里面放元素。

3、画柱状图

// 计算每根柱状物体的宽度

var barWidth = width / data.length

// 用g作每根柱状物体的容器,意义可类比div

// 前一篇文章已经介绍过selectAll的意义,即生成占位符,等待填充svg图形

var bar = chart.selectAll('g')

 .data(data)

 .enter()

 .append('g')

 // 接收一个数据填充一个g元素

 // 同时为g设置位置

 .attr('transform', function(d, i) {

   return 'translate(' + i * barWidth + ', 0)'

 })

bar.append('rect')

 // 添加一个矩形

 .attr('y', function(d) {

   return height - d

 })

 .attr('height', function(d) {

   return d

 })

 .attr('width', barWidth - 1)

前文提到svg的元素定位都是基于整个svg容器左上角作为原点,但并不能使用position: absolute等方法定位,此处的g元素通过位移来定位x坐标,即transform: translate(x, 0)。

这里的bar可类比jQuery对象,是一个类数组对象,bar调用的方法都会对bar里面每个对象进行调用。代码中每一次调用都插入一个矩形,同时设置y坐标、高度和宽度,x坐标跟父容器(g)保持一致即可。这里需要注意y坐标往下为正,为了让所有矩形的下边处于同一高度,这里设置每个矩形的y坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形,这里设置矩形宽度为父容器的宽度减1。

通过以上js代码再稍微设置一点css

rect {

 fill: #2177BB

}

即可看到一张最简单的柱状图了。

4、添加坐标轴

var y = d3.scale.linear()

 .domain([0, d3.max(data)])

 .range([height, 0])

var xAxis = d3.svg.axis()

 .scale(x)

 .orient('bottom')

 .ticks(1)

var yAxis = d3.svg.axis()

 .scale(y)

 .orient('left')

// 添加x坐标轴

chart.append('g')

 .attr('class', 'x axis')

 .attr('transform', 'translate(0,' + height + ')')

 .call(xAxis)

// 添加y坐标轴

chart.append('g')

 .attr('class', 'y axis')

 .call(yAxis)

完整的柱状图就是这样了