d3.js ---画坐标轴

zzzmh 发布于2019-08-02 15:59 / 557人阅读

摘要：画坐标轴使用的的方法生成坐标轴页面效果如下这个时候轴在页面的上方，不在我们想要的位置，可以通过设置属性将坐标轴移到自己想要的位置画轴效果如下，这个时候轴在页面的上方，不在我们想要的位置，所以要让轴旋转轴旋转代码加上旋转后的效果图如下会发现轴

画坐标轴

//使用d3的svg的axis()方法生成坐标轴
var x_axis = d3.svg.axis().scale(scale_x),
    y_axis = d3.svg.axis().scale(scale_y)

g.append("g")
    .call(x_axis)

页面效果如下：这个时候x轴在页面的上方，不在我们想要的位置，可以通过设置transform属性将坐标轴移到自己想要的位置

画y轴

g.append("g")
    .call(y_axis)

效果如下，这个时候x轴在页面的上方，不在我们想要的位置，所以要让y轴旋转

y轴旋转代码：加上 orient()

y_axis = d3.svg.axis().scale(scale_y).orient("left")

旋转后的效果图如下：会发现y轴的数值是由大变小而不是由小变大，这是因为在计算机页面中的时候和几何数学中的坐标轴哦的方向是不一样的

普通数学坐标系：

计算机屏幕坐标系

所以旋转后的y轴坐标系的值是由大变小而不是由小变大

所以我们可以改变y轴的值的范围来改变页面的显示效果

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    //将 .range([0, g_height])修改为：
    .range([g_height, 0]) //range（）定义输出范围

发现这两个类控制着坐标轴样式，通过设置css样式给坐标轴加上刻度

.domain,
.tick line {
    stroke: gray;
    stroke-width: 1;
}

到这儿，坐标系就画完了，~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54454.html

D3.js数据可视化

摘要：和之前用的有啥不同和都是用来生成各类图表的，区别的话可以从使用方法和实现方式上是通过来绘制图形具体使用方法是通过方法初始化一个实例并通过方法生成一个简单的柱状图很轻松搞定。通过来绘制图形使用时需要先创建画布元素然后进行各种绘制图形。你的淘宝年度消费报告那炫酷的图表一下子让人忘了自己花了多少钱，各大门户网站、媒体都开始大量使用图表，于是乎又有一批工具等待我们学习的路上什么是D3.js...

songze 2019-08-22 18:44 评论0 收藏0
使用JavaScript和D3.js实现数据可视化

摘要：它的全称是数据驱动文档，并且它被称为一个互动和动态的数据可视化库网络。我们将使用文本编辑器和浏览器。出于测试目的，建议使用工具来检查和调试和，例如或。使矩形反映数据目前，我们阵列中的所有矩形沿轴具有相同的位置，并且不代表高度方面的数据。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库。它的...

mingde 2019-08-23 10:56 评论0 收藏0
Vs - 基于 d3.js 和 vue.js 的数据可视化

摘要：概述是一个基于和的数据可视化分析包，适用于图表，制作。目前支持的组件主依赖安装使用建议使用搭建环境，以下只针对标准环境。图及其他图标支持的数据类型请见项目主页。 Vs 概述 Vs 是一个基于 d3.js 和 vue.js 的数据可视化分析包，适用于图表，dashboard 制作。 Github Repo 目前支持的组件 d3Bar d3Line d3Pie d3ProgressArc...

Acceml 2019-08-22 16:23 评论0 收藏0
d3.js入门——selection与创建条形图

摘要：入门，根据官网部分教程学习，发现因为版本更新，有些和概念可能不适用，但总体思想未变。入门d3.js，根据官网部分教程学习，发现因为版本更新，有些api和概念可能不适用，但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习，加上自己的理解，并且查阅了部分更新资料元素选择 d3通过d3.select()或者d3.selectAll()获取元素，这两个...

yanbingyun1990 2019-08-23 16:18 评论0 收藏0
D3.js入门

摘要：通过函数可以选择出没有关联任何数据的图形，可以调用相关函数更新或是删除。 D3.js入门 1.什么是D3.js？ Data-Driver-Document（数据驱动文档）：是一个用来使用Web标准做数据可视化的js库；数据可视化：用交互的/可视化的方式对抽象数据进行展示，已达到数据认知的目的，数据是纯粹的的事实，纯粹意味着这种事实没有经过任何处理，而信息是数据处理后的结果，他揭示...

shixinzhang 2019-08-20 16:18 评论0 收藏0
使用D3.js构建实时图形

摘要：在本教程中，我们将探讨如何使用和构建实时图形。通过方法监听轮询更新，并在收到更新后使用最新数据调用函数，以便重新呈现图形。首先你需要在计算机上安装Node和npm。数据的可视化表示是传递复杂信息的最有效手段之一，D3.js提供了创建这些数据可视化的强大工具和灵活性。 D3.js是一个JavaScript库，用于使用SVG，HTML和CSS在Web浏览器中生成动态的交互式数据可视化。...

Ryan_Li 2019-08-23 11:31 评论0 收藏0