在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记:

import * as d3 from 'd3';
import * as React from 'react'; class TestGraph extends React.Component {
public componentDidMount() {
const marge = {
top: 60,
bottom: 60,
left: 60,
right: 60
};
const dataSet: any[] = [10, 20, 30, 23, 13, 40, 27, 35, 20];
const svg = d3.select("svg");
const g = svg.append("g")
.attr("transform", `translate(${marge.top},${marge.left})`);
const width: any = svg.attr('width');
const height: any = svg.attr('height');
// 此处必须把.domain里的参数转为字符串数组,不然会报类型错
const xScale = d3.scaleBand()
.domain(d3.range(dataSet.length).map(value => {
return value.toString();
}))
.rangeRound([0, width - marge.left - marge.right]);
const xAxis = d3.axisBottom(xScale); const yScale = d3.scaleLinear()
.domain([0, d3.max(dataSet)])
.range([height - marge.top - marge.bottom, 0]);
const yAxis = d3.axisLeft(yScale); const gs = g.selectAll(".rect")
.data(dataSet)
.enter()
.append("g");
const rectPadding = 20;// 矩形之间的间隙
const rectWidth = xScale.step();
gs.append("rect")
.attr("x", (d, i) => {
// 此处不能用xScale(i),因为参数只能接受string,就算使用i.toString(),也会报错此对象有可能为undefined
return xScale.step() * (i + xScale.paddingOuter()) + rectPadding / 2;
})
.attr("y", d => {
return yScale(d);
})
.attr("width", rectWidth - rectPadding)
.attr("height", d => {
return height - marge.top - marge.bottom - yScale(d);
})
.attr("fill", "blue"); const fontSize = 14;
gs.append("text")
.attr("x", (d, i) => {
return xScale.step() * (i + xScale.paddingOuter()) + rectPadding / 2;
})
.attr("y", d => {
return yScale(d);
})
.attr("dx", (xScale.step() - rectPadding) / 2 - fontSize / 2)
.attr("dy", 20)
.attr("font-size", fontSize)
.text(d => {
return d;
}); g.append("g")
.attr("transform", `translate(0,0)`)
.call(yAxis);
g.append("g")
.attr("transform", `translate(0,${yScale(0)})`)
.call(xAxis);
} public render() {
return (
<svg width={960} height={600}/>
)
}
} export default TestGraph;

效果如下:

D3(v5) in TypeScript 坐标轴之 scaleBand用法的更多相关文章

  1. D3(v5) in TypeScript 坐标轴之 饼状图生成

    饼状图生成时依旧遇到了类型问题,记录如下: import * as d3 from 'd3'; import * as React from 'react'; class TestGraph exte ...

  2. 使用d3.v5实现条形图

    效果图: 条形图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 使用d3.v5实现饼状图

    效果图: 饼状图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. 使用d3.v5实现折线图与面积图

    d3最新是V5版的,比起V2的API变动了不少,写下我实现过程 效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...

  5. Vue整合d3.v5.js制作--柱状图(rect)

    先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...

  6. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  7. D3.js的v5版本入门教程(第八章)—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  8. D3.js v5 Tutorials

    D3.js v5 Tutorials D3.js v5 教程 https://github.com/d3/d3/blob/master/API.md CHANGES https://github.co ...

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

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

随机推荐

  1. MongoDB单表导出与导入

    mongoexport -h -u dbAdmin -p L-$LpGQ=FJvSf*****([l --authenticationDatabase=project_core_db -d proje ...

  2. Visual Studio 2015 开发 ASP.NET 5

    在以往微软发布或更新 Visual Studio 版本时,我们开发 ASP.NET 应用程序,带给我们的变化其实并不是很大,或者说你根本就感受不到变化,你感受到的只是下载安装了几个 G 的 Updat ...

  3. 宏(使用注意事项、主要用途)------c++程序设计原理与实践(进阶篇)

    使用宏的时候一定要小心:在c中没有真正有效的方法来避免使用宏,但宏带有严重的副作用,因为宏不遵守通常的c(或c++)作用域和类型规则——它只是一种文本替换.   宏的使用注意事项: 所以宏名全部大写. ...

  4. Delphi XE8中开发DataSnap程序常见问题和解决方法 (三)用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”

    当我们在客户端用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”!! 问题原因:服务器端对提供服务的控件所属单元选择错误. ...

  5. 深入解析mapreduce 笔记

    Hadoop组成: mapreduce简单介绍: 伪代码演示: maptask和reducetask执行流程:

  6. Jenkins忘记密码

    当Jenkins密码忘记时,可以去Jenkins的安装目录下的users\用户名_xxxxx\config.conf文件下找下找到<passwordHash></passwordHa ...

  7. PHP7 - MongoDB Driver 使用心得

    php7 只能使用Mongodb driver来驱动mongodb. 使用Mongodb Driver连接数据库 刚开始使用Mongodb Driver的时候我是拒绝的.查看官方文档只看到一排的类和不 ...

  8. java 读取excel 2007 .xlsx文件 poi实现

    工作需要读取excel里面的行内容,使用java实现较为简单. 在最开始,尝试使用 jxl-2.6.12 来实现读取excel 的行内容.但是按照网上的方法,程序根本无法正确处理文件流.经过谷姐的一番 ...

  9. springboot整合mybatis,druid,mybatis-generator插件完整版

    一 springboot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  10. Android 单选按钮(RadioButton)和复选框(CheckBox)的使用

    1.RadioButton (1)介绍 (2)单选按钮点击事件的用法 (3)RadioButton与RadioGroup配合使用实现单选题功能 (4)xml布局及使用 <?xml version ...