d3.js排名图源代码
时间: 2023-05-16 12:01:53 浏览: 59
d3.js是一个JavaScript库,可以用来呈现交互式数据可视化图表。排名图是其中的一种常见的图表类型,通常用于展示数据在特定维度上的排名情况。
d3.js可以通过简单的代码实现排名图的呈现。以下是一个示例代码:
```javascript
// 定义数据
var data = [
{name: "张三", score: 90},
{name: "李四", score: 80},
{name: "王五", score: 70},
{name: "赵六", score: 60},
];
// 设定画布尺寸
var width = 500;
var height = 300;
// 创建画布对象
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 设置比例尺
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){ return d.score; })])
.range([height, 0]);
// 创建矩形元素
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i){ return i * (width / data.length); })
.attr("y", function(d){ return yScale(d.score); })
.attr("width", width / data.length - 10)
.attr("height", function(d){ return height - yScale(d.score); });
// 添加文字标签
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d){ return d.name + " - " + d.score; })
.attr("x", function(d, i){ return i * (width / data.length) + 5; })
.attr("y", function(d){ return yScale(d.score) - 10; })
.attr("font-size", "12px");
```
该代码实现了一个简单的排名图,其中数据包含了每个人的得分和名字。设定画布大小后,使用比例尺将得分映射为矩形高度,然后循环添加矩形和文字标签元素。
可以通过调整比例尺、设置颜色等方式对排名图进行优化和个性化的定制。