D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

最新推荐文章于 2024-05-03 18:08:38 发布
最新推荐文章于 2024-05-03 18:08:38 发布
阅读量5.4k 收藏 14
点赞数 3
原文链接：https://www.cnblogs.com/littleSpill/p/10830001.html
版权

D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

坐标轴(Axis)

 

坐标轴(Axis)在很多图表中都可见到，例如柱形图、折线图、散点图等。坐标轴由一组线段和文字组成，坐标轴上的点由一个坐标值确定。但是，如果使用SVG的直线和文字一笔一画的绘制坐标轴，工作量将会极其的大。D3提供了坐标轴的制作方法，需要之前所给大家讲的比例尺一起使用。开发者仅仅需要几行代码，就能够生成各式各样的坐标轴。

 

与坐标轴相关的方法有:

 

d3.svg.axis() :

创建一个默认的新坐标轴。

 

axis(selection) :

将此坐标轴应用到指定的选择集上，该选择集需要包含有<svg>或<g>元素。

 

axis.scale([scale]) :

设定或获取坐标轴的比例尺。

 

axis.orient([orientation]) :

设定或获取坐标轴的方向，有四个值:top、bottom、left、right。top表示水平坐标轴的刻度在直线下方。bottom表示水平坐标轴的刻度在直线上方。left表示垂直坐标轴的刻度在直线右方。right表示垂直坐标轴的刻度在直线左方。

 

axis.ticks([argument...]) :

设定或获取坐标轴的分隔数，默认为10.例如设定为5，则坐标轴上的刻度数量为6，分段数为5.这个函数会调用比例尺的ticks()

 

axis.tickValues([values]) :

设定或获取坐标轴的指定刻度。例如，参数为[1,2,3,6,7,8]，则在这几个值上会有刻度。

 

axis.tickSize([inner,outer]):

设定或获取坐标轴的内外刻度的长度。默认都为6

 

axis.innerTickSize([size]) :

设定或获取坐标轴的内刻度的长度。内刻度指不是两端的刻度。

 

axis.outerTickSize([size]) :

设定或获取坐标轴的外刻度的长度。外刻度指两端的刻度。

 

asix.tickFormat([format]) :

设定或获取刻度的格式。

 

 

坐标轴的绘制方法:

在之前给大家介绍过，在SVG中有<path>、<line>、<text>元素，D3所绘制的坐标轴就是由这三中元素组成的。其中，坐标轴的主直线是由<path>绘制的。刻度是由<line>绘制的。刻度文字是由<text>所绘制的。举个例子:

 

复制代码

 1  　　　　var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7 
 8         // 用于坐标轴的线性比例尺
 9         var xScale = d3.scale.linear()
10                             .domain([0,10])
11                             .range([0,300])
12 
13 
14         // 定义坐标轴
15         var axisBottom = d3.svg.axis()
16                              .scale(xScale)      //使用上面定义的比例尺
17                              .orient("bottom")   //刻度方向向下
18 
19 
20         //在svg中添加一个包含坐标轴各元素的g元素
21         var gAxis = svg.append("g")
22                     .attr("transform","translate(80,80)")    //平移到(80,80)
23                     .attr("class","axis")　　　　　　　　　　　　24 
25         //在gAxis中绘制坐标轴
26         axisBottom(gAxis)

复制代码

 

坐标轴的所有图形元素需放入<svg>或<g>里，建议新建一个g元素来控制，而不要直接放在<svg>里，因为<svg>中通常还包含有其他的图形元素。上面代码中，先在<body>中添加了<svg>，然后再在<svg>中添加了<g>，坐标轴就绘制在这个<g>中。绘制之后body中的元素结构如图所示: 

 

 

 

class为tick的<g>元素就是刻度，每一个刻度里都包含有<line>和<text>。坐标轴的主直线是最下方的<path>,其class是demain。

 

xScale是一个线性比例尺，其定义域为[0,10]，这是坐标轴刻度值的范围。值域为[0,300]，这是坐标轴实际的像素长度。定义坐标轴时。使用scale(sScale)指定比例尺。代码的最后一行，axis(gAxis)表示的是在gAxis选择集中绘制坐标轴，gAxis是在<svg>中新添加的分组元素。结果如图:

 

 

看到图后是不是觉得这坐标轴太丑了 ~ ~ 而且刻度直线都没有显示出来。这是因为还没有为坐标轴定制样式，首先定义class类名，上面代码第23行处。然后写css代码:

 

复制代码

 1    .axis path{
 2         fill:none;
 3         stroke : black;
 4         shape-rendering:crispEdges;
 5     }
 6     .axis line{
 7         fill:none;
 8         stroke : black;
 9         shape-rendering:crispEdges;
10     }
11     .axis text{
12         font-family: sans-serif;
13         font-size: 11px;
14     }

复制代码

 

现在再看一下效果图: 

 

 

现在比之前要美观多了。上面使用了axis(gAxis)的方式来指定绘制的位置。除此之外，还有一种常用的方式。就是之前讲过的call()。gAxis.call(axis)。这种方式的调用以后会很常用的。

 

坐标轴 刻度

说到坐标轴的属性，基本上是在说刻度，例如刻度的方向、间隔、长度、文字格式等。上次给大家讲的坐标轴，设置了刻度的方向orientation("bottom")，因此刻度在直线的下方。如果要设置在什么值上标出刻度，使用ticks()和tickValues()。举个例子:

 

复制代码

 1 　　　　 var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7         //用于坐标轴的线性比例尺
 8 
 9         var xScale = d3.scale.linear()
10                             .domain([0,10])
11                             .range([0,300])
12 
13 
14         //定义坐标轴
15         var axisLeft = d3.svg.axis()
16                             .scale(xScale)
17                             .orient("left")  //刻度方向向左
18                             .ticks(5)
19 
20 
21         //在svg中添加一个包含坐标轴各元素的g元素
22         var gAxis = svg.append("g")
23                     .attr("transform","translate(80,80)")    //平移到(80,80)
24                     .attr("class","axis")
25         //在gAxis中绘制坐标轴
26         axisLeft(gAxis)

复制代码

 

效果图:

 

 

 

再举个例子:

 

复制代码

 1 　　　　 var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7         //用于坐标轴的线性比例尺
 8 
 9         var xScale = d3.scale.linear()
10                             .domain([0,10])
11                             .range([0,300])
12 
13 
14         //定义坐标轴
15         var axisRight = d3.svg.axis()
16                             .scale(xScale)       
17                             .orient("right")    //刻度方向向右
18                             .tickValues([3,4,5,6,7])            
19 
20 
21 
22         //在svg中添加一个包含坐标轴各元素的g元素
23         var gAxis = svg.append("g")
24                     .attr("transform","translate(80,80)")    //平移到(80,80)
25                     .attr("class","axis")
26         //在gAxis中绘制坐标轴
27         axisRight(gAxis)

复制代码

 

效果图:

 

 

 

比例尺scale的定义域为[0,10]。上面两个例子定义了两个坐标轴，刻度分别位于左边和右边，刻度值分别用ticks()和tickValues()来指定。注意刻度的区别。

 

上面绘制的坐标轴，刻度的直线都是相同长度的:有时候也需要不同的长度的,最常见的是首位两个刻度的长度比内部要长。此时需要用到tickSize()，举个例子:

 

复制代码

 1  　　　　var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7         //用于坐标轴的线性比例尺
 8 
 9         var xScale = d3.scale.linear()
10                             .domain([0,10])
11                             .range([0,300])
12 
13         //定义坐标轴
14         var axiosTop = d3.svg.axis()
15                         .scale(xScale)
16                         .orient("top")  //刻度方向向上
17                         .ticks(5)
18                         .tickSize(2,4)
19　　　　　　　　　　　　　　　.tickFormat(d3.format("$0.1f"))
20 
21 
22         //在svg中添加一个包含坐标轴各元素的g元素
23         var gAxis = svg.append("g")
24                     .attr("transform","translate(80,80)")    //平移到(80,80)
25                     .attr("class","axis")
26         //在gAxis中绘制坐标轴
27         axiosTop(gAxis)
28

复制代码

 

tickSize()的第一个参数是内部刻度的直线长度，第二个参数是首尾两个刻度的直线长度。也可以用innerTickSize()和outerTickSize()分别进行设置。如图，两端的刻度线比内部的要长。

 

 

 

刻度文字的格式通过tickFormat()设置，此外还需要用到d3.format()，它返回的对象作为tickFormat()的参数。在d3.format()的参数里，可指定刻度文字的格式。例如在上面代码第19行处添加.tickFormat(d3.format("$0.1f")) ,然后看一下效果图:

 

 

文字格式的规则遵循迷你语言的格式规范。

 

 

各比例尺的坐标轴

坐标轴必须要设置一个比例尺，根据比例尺的不同可以得到不同的坐标轴。使用的最多的是线性比例尺。下面来看看随着比例尺的不同，坐标轴的刻度是怎样变化的。

 

一 、 线性比例尺的坐标轴:

 

代码 : 

 

复制代码

 1  　　　　var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7 
 8         //用于坐标轴的比例尺
 9 
10         // 线性比例尺
11         var xScaleLine = d3.scale.linear()
12                         .domain([0,1])
13                         .range([0,500])
14 
15         //定义坐标轴
16 
17         var axisBottomLine = d3.svg.axis()
18                              .scale(xScaleLine)      //使用上面定义的比例尺
19                              .orient("bottom")       //刻度方向向下
20 
21 
22         //在svg中添加一个包含坐标轴各元素的g元素
23         var gAxis = svg.append("g")
24                     .attr("transform","translate(80,80)")    //平移到(80,80)
25                     .attr("class","axis")
26 
27         //在gAxis中绘制坐标轴
28         axisBottomLine(gAxis)

复制代码

 

效果图:

 

 

 

二 、 指数比例尺的坐标轴:

 

代码:

 

复制代码

 1 　　　　 var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7 
 8         //用于坐标轴的比例尺
 9 
10         // 指数比例尺
11         var xScalePow = d3.scale.pow()
12                         .exponent(2)
13                         .domain([0,1])
14                         .range([0,500])
15 
16 
17         //定义坐标轴
18 
19         var axisBottompPow = d3.svg.axis()
20                              .scale(xScalePow)      //使用上面定义的比例尺
21                              .orient("bottom")      //刻度方向向下
22 
23 
24         //在svg中添加一个包含坐标轴各元素的g元素
25         var gAxis = svg.append("g")
26                     .attr("transform","translate(80,80)")    //平移到(80,80)
27                     .attr("class","axis")
28 
29         //在gAxis中绘制坐标轴
30         axisBottompPow(gAxis)

复制代码

 

效果图:

 

三 、 对数比例尺的坐标轴:

 

代码 :

复制代码

 1  　　　　var width = 600;
 2         var height = 600;
 3         var svg = d3.select("#body")
 4                     .append("svg")
 5                     .attr("width",width)
 6                     .attr("height",height)
 7 
 8         //用于坐标轴的比例尺
 9 
10         var xScaleLog = d3.scale.log()
11                             .domain([0.01,1])
12                             .range([0,500])
13 
14 
15         //定义坐标轴
16         var axisBottomLog = d3.svg.axis()
17                              .scale(xScaleLog)      //使用上面定义的比例尺
18                              .orient("bottom")      //刻度方向向下
19 
20         //在svg中添加一个包含坐标轴各元素的g元素
21         var gAxis = svg.append("g")
22                     .attr("transform","translate(80,80)")    //平移到(80,80)
23                     .attr("class","axis")
24 
25         //在gAxis中绘制坐标轴
26         axisBottomLog(gAxis)

复制代码

 

效果图:

 

其他比例尺下的坐标轴大家可以自己去试一下。

 

下一章给大家做一个带比例尺、坐标轴的柱形图。

 

 

 

 

 

HOLD ON!
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axis:用JavaScript编写的有趣而无用的玩具语言
05-12
轴0.1-alpha Axis是用JavaScript编写的有趣且无用的玩具语言。 Axis是一种多范式，脚本化的，可选的面向对象的命令式编程语言。 Axis源使用标准的Node.js CLI二进制文件执行，最终通过Google的V8引擎进行JIT编译。 通过Node.js的支持，Axis可以访问Node.js核心提供的低级API。 当前的基准测试表明，Axis比Node.js慢大约50％。 目标是使Axis的运行速度比Node.js慢20％-5％。 Axis使用窥视，读取和倒带解释，并在内存中构造对象模型，直到需要使用它为止。 Axis是什么样的？ // new function fn say_hello ( msg ) { if msg { // truthy/falsy conditionals return msg ; } else { return
可视化库D3.js（1）-入门篇
尤尔小屋
05-04 1万+
从今天开始可视化库D3.js\color{red}{D3.js}D3.js的第一章-入门篇咯???? 什么是D3.js D3指的是Data-Driven Documents，js即Javascript，是后缀名。先看看官网上对D3.js库的定义： D3.js is a JavaScript library for manipulating documents based on data.D3 he...
使用D3.js进行数据可视化
最新发布
m0_73500130的博客
05-03 1094
D3.js是一个流行的JavaScript数据可视化库，全称为Data-Driven Documents，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。
d3.js学习
热门推荐
weixin_46999458的博客
02-05 1万+
/
D3.js 介绍与入门
kang_k的博客
06-26 9125
D3.js（全称：Data-Driven Documents）数据驱动文档是一个基于数据驱动 DOM 的 JS 库。 相比EChart、G2...之类的封装好的图标库，D3就像一个Jquery。 封装了很多函数供开发者使用。
一文读懂：D3.js的前世今生，以及与echarts的对比
贝格前端工场的博客
01-24 9048
D3.js由美国斯坦福大学的一位计算机科学家Mike Bostock于2011年创造。它的设计目标是帮助开发者使用数据来操作文档对象模型（DOM）并创建数据可视化。D3.js的核心理念是将数据绑定到DOM元素上，并使用数据驱动的方式来更新元素的样式、位置和属性。
【D3.js】基础教程
weixin_39085822的博客
01-12 1万+
D3: Data-Driven Documents D3 (或D3.js)是一个JavaScript库，用于使用Web标准可视化数据。 D3帮助您使用SVG，Canvas和HTML使数据栩栩如生。 D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，为您提供现代浏览器的全部功能，并为您的数据设计正确的可视界面提供了自由。 官方资源 API Reference Release Notes Gallery Examples Wiki 安装D3 npm安装 安装命令npm install d3;
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
11-27
现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。 还有数据都是自己...
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
11-26
由此可以猜到，需要的元素包括circle(圆)和axis(坐标轴)。需要进行可视化的数据有: //圆心数据 var center = [ [0.5,0.5],[0.7,0.8],[0.4,0.9], [0.11,0.32],[0.88,0.25],[0.75,0.12], [0.5,0.1],[0.2,0.3],...
D3.js实现柱状图的方法详解
11-26
D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。...
d3plus-axis:美丽的javascript刻度和坐标轴
05-24
d3plus轴 美丽的javascript比例尺和坐标轴。正在安装如果使用NPM，则npm install d3plus-axis 。 否则，请下载。 您还可以将d3plus-axis加载为独立库或一部分。 支持ES模块，AMD，CommonJS和普通环境。 在香草中，将...
使用d3.js实现的柱状图效果，带坐标轴
03-20
使用d3.js实现的柱状图效果，带坐标轴，可以直接下载使用。
D3.js 基础学习笔记
985小菜鸡
06-01 3611
D3 stands for Data-Driven Documents. D3.js 是一个用于根据数据操作文档的 JavaScript 库。D3.js 是一个在大量网站中使用的动态、交互式、在线数据可视化框架。
D3.js入门之旅--基础讲解
Blog of Leviash
09-12 2128
D3.js（Data-Driven Documents）是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据，帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。在学习D3.js时，我们将了解到如何使用JavaScript操作和绑定数据，创建可扩展的可视化效果，并在图表中实现交互和动画等功能。
图形化开发（一）——D3.js的基本介绍、技术原理
weixin_44867717的博客
09-20 8157
图形化开发（一）——D3.js的基本介绍、技术原理 D3.js 为什么学习D3 中文官网——https://www.d3js.org.cn/ github——https://github.com/d3/d3 D3.js和threejs的应用场景完全不一样。threejs主要应用与基于webGL的3D场景，而D3.js确主要应用与2D场景。 它们一起形成了一种互补关系。 简而言之D3JS就是一个数据可视化的库。 那什么是数据可视化呢？ 给出一组数据 [10，80，40,100,30,20,50] 类似的
D3.js知识总结
happy_programer的博客
08-24 6816
D3.js使用方法 D3.js官网 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。 D3设置SVG中的属性 常见的属性 id,class(特殊的属性) x,y,cx,cy(注意屏幕的坐标系) fill(填充的颜色),stroke(外轮廓的颜色) height,width(矩形的宽高),
前端数据可视化：D3.js的实践
禅与计算机程序设计艺术
01-05 1414
1.背景介绍 数据可视化是指将数据以图形、图表、图片的形式呈现给用户，以帮助用户更好地理解数据。随着数据的增长，数据可视化也越来越重要。前端数据可视化是指在网页上使用HTML、CSS、JavaScript等技术来呈现数据，以帮助用户更好地理解数据。D3.js是一个用于创建动态、交互式数据可视化的JavaScript库，它可以帮助我们更好地理解数据。 1.1 D3.js的发展历程 D3.js是...
数据可视化--D3.js入门（数据集与数据）
小芋儿的博客
08-14 2869
D3.js入门D3（Data-Driven Document）:数据驱动文档D3的优势：学习D3.js之间需要学习的：学习D3.js的网站：第一节：数据集与数据选择集：select()、selectAll()数据绑定：datum()、data()数组Array：映射Map：集合Set：嵌套结构Nest： D3（Data-Driven Document）:数据驱动文档 D3是一个JavaScript的数据库，是用来做数据可视化的。其中文档指的是DOM，即文档对象模型（Document Object Model
【一起学d3.js】（一）
weixin_44045702的博客
06-08 2273
一起学d3.js
d3js添加柱状图添加xy轴坐标
07-13
### 回答1： 在使用d3.js添加柱状图时，我们可以通过以下步骤来添加XY轴坐标： 1. 创建画布：首先，我们需要创建一个SVG画布，并设定合适的宽度和高度，以容纳我们的柱状图和坐标轴。 2. 设定比例尺：根据数据的范围，我们需要设定一个比例尺来将数据映射到坐标轴上。比例尺可以是线性比例尺（d3.scaleLinear()）或者是序数比例尺（d3.scaleOrdinal()）。根据需要设定x轴和y轴的比例尺。 3. 创建坐标轴：使用d3.axis()函数创建一个坐标轴生成器，并通过指定比例尺和方向来定制坐标轴的样式和刻度。 4. 渲染坐标轴：将坐标轴生成器应用到x和y轴上，并通过translate()函数设置坐标轴的位置。例如，通过将x轴定位在底部，y轴定位在左边。 5. 创建柱状图：使用绑定数据的方式，通过SVG的矩形元素或g元素创建柱状图。可以根据数据的值来设定柱状图的宽度、高度和位置。 6. 添加动画效果（可选）：通过使用d3的过渡函数（transition）和延迟函数（delay），可以为柱状图添加动画效果，使其显示变得平滑。 7. 标记坐标轴刻度（可选）：可以使用d3的tickFormat函数来设定坐标轴上刻度的显示格式，如千位分隔符等。 通过以上步骤，我们就可以用d3.js添加柱状图并添加XY轴的坐标了。具体实现的代码可以参考d3.js的官方文档或相关教程。 ### 回答2： 在使用d3.js创建柱状图时，我们需要添加x和y轴坐标来帮助展示数据的分布和比较。下面是添加xy轴坐标的步骤： 1. 创建一个svg元素来容纳整个图表。可以使用d3.select方法选择一个div元素，并通过append方法添加一个svg元素。 2. 设置svg元素的宽度和高度，以及padding值，以便给轴线留出足够的空间。 3. 创建一个x轴比例尺。根据柱状图的数据范围和svg的宽度，使用d3.scaleLinear方法创建一个线性比例尺。 4. 创建一个y轴比例尺。根据柱状图的数据范围和svg的高度，使用d3.scaleLinear方法创建一个线性比例尺。 5. 创建一个x轴生成器。使用d3.axisBottom方法创建一个x轴生成器，并传入之前创建的x比例尺。 6. 创建一个y轴生成器。使用d3.axisLeft方法创建一个y轴生成器，并传入之前创建的y比例尺。 7. 将x轴生成器应用到svg元素上的一个g元素上，并通过transform属性将其放置在适当的位置。 8. 将y轴生成器应用到svg元素上的一个g元素上，并通过transform属性将其放置在适当的位置。 9. 如果需要，可以对x轴和y轴进行一些样式设置，比如设置轴线颜色、刻度颜色、文本颜色等。 10. 最后，将柱状图绘制到svg元素上。可以使用d3.select方法选择之前创建的g元素，并通过data和enter方法添加rect元素来表示柱子。可以根据x和y比例尺的返回值来设置每个柱子的位置和高度。 以上就是使用d3.js添加xy轴坐标的基本步骤。根据实际需求和个性化要求，你可以对以上步骤进行进一步的扩展和样式设置。 ### 回答3： 要在d3js中添加柱状图并添加坐标轴，首先需要以下步骤： 1. 创建SVG元素：使用d3.select选择一个HTML元素，然后添加一个SVG元素，设置其宽度和高度。例如： var svg = 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 + ")"); 2. 创建坐标轴比例尺：使用d3.scaleBand()创建x轴比例尺，使用d3.scaleLinear()创建y轴比例尺。然后设置其域和范围。例如： var x = d3.scaleBand() .range([0, width]) .domain(data.map(function(d) { return d.x; })); var y = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data, function(d) { return d.y; })]); 3. 添加柱状图：使用d3.selectAll选择所有柱子的元素，然后使用data()方法将数据绑定到这些元素上。然后使用enter()方法进入上次缺失的元素，并使用append()方法添加矩形元素作为柱子。例如： svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return y(d.y); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.y); }); 4. 添加坐标轴：使用d3.axisBottom()创建x轴，使用d3.axisLeft()创建y轴。然后使用call()方法将坐标轴添加到SVG元素中。例如： svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); 以上就是在d3js中添加柱状图并添加坐标轴的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值