D3.js v4 — 画个柱状图

D3 (Data-Driven Documents)或者叫 D3.js 是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.

D3支持 SVG 以及 Canvas 进行作画,在这里首先使用 SVG 来画一个简单的柱状图。

1. 选择器与数据绑定

首先我们先看看d3的选择器,D3用于选择的函数有两个:

  1. d3.select():用来选择所有指定元素中的第一个
  2. d3.selectAll():用来选择所有的指定元素

常用例子有

var body = d3.select("body");       //选择文档中的body元素
var p1 = body.select("p");          //选择body中的第一个p元素
var p 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是使用d3.js生成一个简单的柱的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .bar { fill: steelblue; } </style> </head> <body> <script> // 数据集 var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12]; // 定义布大小及边距 var margin = { top: 30, right: 30, bottom: 30, left: 30 }; var width = 600 - margin.left - margin.right; var height = 400 - margin.top - margin.bottom; // 创建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 + ")"); // 定义x轴比例尺 var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width]) .paddingInner(0.1); // 定义y轴比例尺 var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([height, 0]); // 添加矩形 svg.selectAll(".bar") .data(dataset) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - yScale(d); }); // 添加x轴 svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); // 添加y轴 svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); </script> </body> </html> ``` 在这个示例代码中,我们使用了d3.js的选择集、比例尺、坐标轴等功能来生成一个简单的柱。具体实现过程可以参考代码注释。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值