可视化工具–D3–坐标轴的使用

最新推荐文章于 2023-07-16 12:06:53 发布

Klrlin

最新推荐文章于 2023-07-16 12:06:53 发布

阅读量2.2k

点赞数 1

分类专栏： D3 文章标签： d3 可视化工具 d3.js 可视化坐标轴

本文链接：https://blog.csdn.net/u014711869/article/details/77447466

版权

D3 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

坐标轴作为一个可视化图表里的组成部分，扮演者十分重要的角色。
d3.js里定义了坐标轴的绘制方法(个人翻译，有错误请谅解)：
• d3.axisTop – 创建一个坐标轴生成器（top）
• d3.axisRight - 创建一个坐标轴生成器（Right）
• d3.axisBottom - 创建一个坐标轴生成器（Bottom）
• d3.axisLeft - 创建一个坐标轴生成器（Left）
• axis – 生成坐标轴
• axis.scale – 为坐标轴设置比例尺
• axis.ticks – 定义坐标轴刻度生成方式（默认值为）
• axis.tickArguments – 定义坐标轴刻度参数
• axis.tickValues – 设置有特殊需求的刻度值（默认值为null）
• axis.tickFormat – 设置有特殊需求的刻度格式（默认值为null）
• axis.tickSize – 设置刻度的大小
• axis.tickSizeInner – 设置除两端外所有刻度的长度（默认值为6）
• axis.tickSizeOuter - 设置两端刻度的长度（默认值为6）
• axis.tickPadding – 设置刻度与文字之间距离（默认值为3）

这里写图片描述

axis.ticks(5) 与 axis.tickArguments([5]) 的效果相同
axis.ticks(d3.timeMinute.every(10)) 可以生成时间刻度，同时也可以用
axis.tickArguments([d3.timeMinute.every(10)]) 来生成

var svg = d3.select("svg"),
            margin = {top: 20, right: 20,bottom: 30, left: 50},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var Format= d3.format(',.0f');


var x = d3.scaleLinear()
            .range([0, width])
            .domain([0,10]);

var y = d3.scaleLinear()
            .range([height, 0])
            .domain([20,0]);

var xAxis=d3.axisBottom()
            .scale(x)
            .ticks(5)
            .tickValues([1, 2, 4, 8])
            .tickFormat(function(d) { return '#' + Format(d); })
            .tickSizeInner(5)
            .tickSizeOuter(20)
            .tickPadding(10);

var xAxis2=d3.axisTop()
            .scale(x)
            .tickArguments([5])
            .tickValues([2, 3, 5, 7])
            .tickFormat(function(d) { return Format(d)+ '*' ; })
            .tickPadding(2);

g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

g.append("g")
            .attr("transform", "translate(0,0)")
            .call(xAxis2);

g.append("g")
            .call(d3.axisLeft(y));

g.append("g")
            .attr("transform", "translate("+width+",0)")
            .call(d3.axisRight(y));