d3入门篇（二）：绘制基本的柱形图

张率功发布于2019-08-23 14:00 / 2800人阅读

摘要：简单理解后的元素需要继续进行可视化的工作。当选择集中的元素个数大于数据集中的元素个数，通过处理之后返回多出来那部分数据的元素选择器这时候接着执行那就是在上了。简单理解后返回的是一个选择集，即多出来的那部分元素。

d3简单理解就是通过在svg画布上绘制基本图形，本文将介绍d3绘制基本的柱形图

绘制画布

import * as d3 from "d3";
var width=300;//svg画布宽
var height=200;//svg画布高
//定义画布
var svg=d3.select("body")
    .append("svg")
    .attr("width",width)
    .attr("height",height)
    .style("background-color","yellow")

绘制矩形

var rectWidth=30;//每个矩形的默认宽度
svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

结果

总结

1.画布上的坐标轴方向：
    x轴方向为水平向右；
    y轴方向为垂直向下；
2.矩形的基本属性：
    x,y分别对应矩形左上角的坐标轴；
    width，height分别对应矩形的宽和高；
    （本示例的数据可视化通过高度来体现）
3.由于默认的y轴方向为垂直向下，所以为了绘制柱形图，我们需要通过attr矩形的transform属性对矩形进行翻转；
4.默认的矩形填充颜色为黑色；

绑定数据

var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

结果

可以发现前两个矩形的填充颜色和数据并没有发生变化，后面的蓝色矩形为绑定数据后新append的元素；

如果前两个矩形我们不设置高度，是否会通过数据集绑定上相关数据呢？

svg.append("rect")
svg.append("rect")
var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

结果

结果发现前两个矩形不设置相关属性和值的情况下，也没有和数据集进行绑定，进行相关的可视化工作。

如果我们在绑定数据后立刻attr矩形的属性呢？是否会有所改变呢？

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

var dataset=[45,70,12,79,4,127,33,90];

svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

结果

前两个矩形的颜色发生了改变。

现在我们改变一下数据集里面数据的个数，看看会发生什么情况？

var dataset=[45];
//,70,12,79,4,127,33,90
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

结果

我们发现如果数据集里数据的个数只有一个，那么只有第一个矩形的颜色会改变，第二个为默认的黑色。

那么如果在数据集不变的情况下，我们想改变第二个矩形的颜色该怎么做呢？

//这里我们使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")

结果

总结

1.当选择集中已经有了矩形，再进行绑定数据时，数据集中已经存在的矩形的数据不会根据数据集进行更新，会保持不变。
2.当选择集与数据集进行绑定是会出现以下情况：
（1）当选择集中的元素个数小于数据集中的元素个数，d3 会为多出来的 data 生成占位符，通过 enter() 处理之后就可以为这些占位符 append 元素。简单理解：enter（）后的元素需要继续进行可视化的工作。
（2）当选择集中的元素个数大于数据集中的元素个数，通过 exit() 处理之后返回多出来那部分数据的元素选择器(这时候接着执行 append 那就是在 rect 上 append rect 了)。简单理解：exit（）后返回的是一个选择集，即多出来的那部分元素。

云服务器 GPU云服务器柱形图 jquery flot柱形图 html5动态柱形图 js根据表格数据生成柱形图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99929.html

d3.js 创建完整柱形图

摘要：之前只是各个部分的，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺，注意输入域轴使用比例尺用于柱形 d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对scale（比例尺）的理解...

snowLu 2019-08-23 16:44 评论0 收藏0
d3入门篇（四）：绘制完整柱状图添加过渡效果

摘要：这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。结果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放结果图是想反馈一下在整合基...

Jason 2019-08-23 14:08 评论0 收藏0
爬取淘宝上4000条月饼数据，制作了一个酷炫的可视化大屏！

摘要：基于此，我爬取了淘宝上多条月饼的销售数据，为大家展示了一幅漂亮的可视化大屏，解决大家心目中的问题。模块的安装与配置这次爬取淘宝，采用的是最简单的方式控制浏览器进行自动化操作，中途只需要扫码登陆一次，即可完成整个数据的爬取。 ...

cod7ce 2021-09-04 16:40 评论0 收藏0
d3入门篇（三）：比例尺坐标轴

摘要：为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放。根据这些规则，会为我们返回一个比例尺函数。这篇文章继续介绍d3的基础知识比例尺在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的...

tomato 2019-08-23 14:03 评论0 收藏0
d3.js交互图表

摘要：如果对原生还有比较熟悉的话，的交互很快就能掌握还是拿完整的柱形图例子修改完整的柱图通过对元素进行事件绑定或移除，用法很简单，例如注意这里使用才有指向对应元素用法和原生及几乎一样给柱状图进行事件绑定这里我们使得鼠标悬浮的柱状图颜色变为中，元素 d3js v5.9.2 如果对原生JS还有Jq比较熟悉的话，d3的交互很快就能掌握还是拿完整的柱形图例子修改：完整的柱图 showImg...

Miracle 2019-08-23 16:46 评论0 收藏0