d3绘制基本柱形图实施代码

柱形图是最简单的图表之一，用列的长度来表示数据的变化。柱形图一般包括矩形、坐标轴和文字。

对d3的简单理解是在svg画布上绘制基本图形。本文将介绍d3绘制基本柱形图

绘制画布

从“d3”导入*作为D3；var宽度=300；//svg画布宽度var高度=200；//svg画布高度//定义画布var SVG=D3。选择('正文')。追加(' SVG ')。attr ('width '，width)。attr('高度'，高度)。样式(“背景色”、“黄色”)绘制一个矩形

var rectWidth=30//每个矩形的默认宽度是svg.append ('rect ')。attr ('width '，rectwidth-2)。attr('高'，40)。attr ('x '，0)。attr ('y '，200)。attr ('transform '，$ {-40}) `) svg.append ('rect ')。attr ('width '，rectwidth-2)。attr('高度'，20)。attr ('x '，矩形宽度)。attr ('y '，200)。attr(。

摘要

1.画布上的轴方向：

x轴方向水平向右；y轴方向垂直向下；2.矩形的基本属性：

x和y分别对应矩形左上角的坐标轴；宽度和高度分别对应矩形的宽度和高度；(在本例中，数据可视化是通过高度来反映的。) 3.因为默认的Y轴方向是垂直向下的，为了绘制柱形图，我们需要通过attr矩形的transform属性翻转矩形；

4.默认矩形填充颜色为黑色；

绑定数据

var数据集=[45，70，12，79，4，127，33，90]；svg.selectAll('rect ')。数据(数据集)//。attr('填充'，'白色')。输入()。追加(' rect ')。attr('width '，rectWidth-2)。attr('高度'，函数(d，I) {return d})。attr ('x '，函数(d，I) {return rectwidth * I})。attr ('y '，200)。attr ('transform '，函数(d，I) {return`translate (0，$ {-d)

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

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

SVG . append(' rect ')SVG . append(' rect ')var dataset=[45，70，12，79，4，127，33，90]；svg.selectAll('rect ')。数据(数据集)//。attr('填充'，'白色')。输入()。追加(' rect ')。attr('width '，rectWidth-2)。attr('高度'，函数(d，I) {return d})。attr ('x '，函数(d，I) {return rectwidth * I})。attr ('y '，200)。attr ('transform '，函数(d，I) {return`translate (0，$ {-d)

结果表明，前两个矩形在没有设置相关属性和值的情况下，不会绑定到数据集，并做了相关的可视化工作。

如果我们在绑定数据后立即修改矩形的属性会怎么样？会改变吗？

svg.append('rect ')。attr('width '，rectWidth-2)。attr('高'，40)。attr('x '，0)。attr('y '，200)。attr('transform '，` translate(0，${-40})`)svg.append('rect ')。attr('width '，rectWidth-2)。attr('高度'，20)。attr('x '，矩形宽度)。attr('y '，200)。attr('transform '，` translate(0，${-20})`)var dataset=[45，70，12，79，4，127，33，90]；svg.selectAll('rect ')。数据(数据集)。attr('填充'，'粉色')。输入()。追加(' rect ')。attr('width '，rectWidth-2)。attr('高度'，函数(d，I) {return d})。attr ('x '，函数(d，I) {return rectwidth * I})。attr ('y '，200)。attr ('transform '，函数(d，I) {return`translate (0，$ {-d)

前两个矩形的颜色已经改变。

现在让我们改变数据集中的数据数量，看看会发生什么。

var数据集=[45]；//，70，12，79，4，127，33，90svg.selectAll('rect ')。数据(数据集)。attr('填充'，'粉色')。输入()。追加(' rect ')。attr('width '，rectWidth-2)。attr('height '，函数(d，I) {return d})。attr ('x '，函数(d，I) {return rectwidth * I})。attr ('y '，200)。attr ('transform '，函数(d，I) {return`translate (0，

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

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

//这里我们使用exit () SVG。全选('矩形')。数据(数据集)。attr('填充'，'粉色')。退出()。attr(“填充”、“红色”)结果

摘要

1.当选择集中有矩形，然后绑定数据时，数据集中已经存在的矩形的数据不会根据数据集进行更新，而是保持不变。

2.当选择集绑定到数据集时，将出现以下情况：

(1)当选择集中的元素数量小于数据集中的元素数量时，d3将为额外的数据生成占位符，并输入enter()，您可以为这些占位符追加元素。简单理解：enter()后的元素需要继续可视化。

(2)当选择集中的元素个数大于数据集中的元素个数时，在exit()处理后返回额外部分数据的元素选择器(此时，接下来执行append，即append rect on rect)。简单理解：exit()后返回的是一个选择集，也就是多余的元素。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。