d3.js——直方图的绘制及过去知识点的结合

//随机生成数据
var rand = d3.random.normal(0,25)
var dataset = [];
for (var i = 0;i <100;i++){
    dataset.push(rand());
}

一、直方图数据转换函数:

//数据转换
var bin_num = 15
var histogram=d3.layout.histogram()
    .range([-50,50]) //区间范围
    .bins(bin_num) //分隔数
    .frequency(true)//true:统计个数;false:统计概率
var data = histogram(dataset);
console.log (data)

二、开始绘制:

var svg = d3.select("body").append("svg")
    .attr("width",600)
    .attr("height",600)
var color = d3.scale.category20();

1、定义比例尺

var max_height = 400,
    rect_step = 30,//直方图间距
    heights = [];
for (var i = 0;i<data.length;i++){
    heights.push(data[i].y)
}
var scale_y = d3.scale.linear()
    .domain([d3.min(heights),d3.max(heights)])
    .range([0,max_height])

2、绘制图形

var graphics = svg.append("g")
    .attr("transform","translate(30,20)");

(1)绘制矩形并加入动画效果

graphics.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("y",function(d,i){
        return 300
    })//动画开始的y值
    .attr("height",0)//动画开始高度
    .attr("fill","red")//动画开始颜色
    .transition()//实现动态效果函数
    .duration(3000)//指定整个转变持续的时间,单位为毫秒
    .ease("bounce")//指定转变的方式,linear:普通的线性变化;circle:慢慢地到达变换的最终状态;elastic带有弹跳的到达最终状态;bounce在最终状态处弹跳几次.
    .delay(function(d,i){
        return 200*i;
    })//指定延迟的时间,表示一定时间后才开始转变,单位同样为毫秒
    .attr("x",function(d,i){return i*rect_step})
    .attr("y",function(d,i){return max_height - scale_y(d.y)})
    .attr("width",function(d,i){return rect_step-2})
    .attr("height", function (d) {
        return scale_y(d.y)
    })
    .attr("fill",color)
<pre name="code" class="javascript">//添加鼠标事件
var rect = graphics.selectAll("rect")
    .on("mouseover",function(d,i){
        d3.select(this)
            .attr("fill","yellow")
    })
    .on("mouseout",function(d,i){
        d3.select(this)
            .attr("fill",color)
    })

(2)绘制带有箭头的坐标轴

//绘制箭头
var defs = svg.append("defs")
var arrowMarker = defs.append("marker")
    .attr("id","arrow")
    .attr("markerUnits","strokeWidth")
    .attr("markerWidth",30)
    .attr("markerHeight",30)
    .attr("viewBox","0 0 20 20")
    .attr("refX",6)
    .attr("refY",6)
    .attr("orient","auto")
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
    .attr("d",arrow_path)
    .attr("fill","#000")
//绘制横轴、纵轴并添加箭头
graphics.append("line")
    .attr("stroke","black")
    .attr("stroke-width","1px")
    .attr("x1",0)
    .attr("y1",max_height)
    .attr("x2",data.length*rect_step)
    .attr("y2",max_height)
    .attr("marker-end","url(#arrow)")
graphics.append("line")
    .attr("stroke","black")
    .attr("stroke-width","1px")
    .attr("x1",0)
    .attr("y1",max_height)
    .attr("x2",0)
    .attr("y2",0)
    .attr("marker-end","url(#arrow)")
//绘制坐标轴的分隔符直线
graphics.selectAll(".linetick")
    .data(data)
    .enter()
    .append("line")
    .attr("stroke","black")
    .attr("x1",function(d,i){return i*rect_step+rect_step/2})
    .attr("y1",max_height)
    .attr("x2",function(d,i){
        return i*rect_step+rect_step/2
    })
    .attr("y2",max_height+5)

(3)添加文字

graphics.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .attr("font-size","10px")
    .attr("x",function(d,i){
        return i * rect_step;
    })
    .attr("y", function(d,i){
        return max_height;
    })
    .attr("dx",rect_step/2 - 8)
    .attr("dy","15px")
    .text(function(d){
        return Math.floor(d.x);
    });

效果如下:

时间: 2024-11-08 23:33:42

d3.js——直方图的绘制及过去知识点的结合的相关文章

d3.js——箭头的绘制

首先我们要明白如何在svg中进行箭头的绘制: 先写一对<defs>,里面再写一对<marker>,其中marker的属性意义为: viewBox 坐标系的区域 refX, refY 在 viewBox 内的基准点,绘制时此点在直线端点上(要注意大小写) markerUnits 标识大小的基准,有两个值:strokeWidth(线的宽度)和userSpaceOnUse(图形最前端的大小) markerWidth, markerHeight 标识的大小 orient 绘制方向,可设定为

【玩转D3.js】--(1)绘制网格线

我们常常使用常规图表(直方图,折线图等)来表现数据.为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值. 除了这个办法外,还可以使用色调偏淡的网格作为背景参照. 本文介绍了如何使用D3绘制网格线的小技巧: 绘制效果: 思路很简单: 1 绘制SVG容器. 2 给SVG分组,并设置分组的样式类. 3 为分组分别添加横线和竖线. 关键技术介绍 (1) 生成一个10元素的数组: (2) 定义x和y比例尺 x = d3.scale.linear().domain([0,1]).range

【 D3.js 进阶系列 — 5.0 】 直方图

直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~20的数值范围分为5段,即: 10~12, 12~14, 14~16, 16~18, 18~20 那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,能够知道,这5段分别具有的元素个数为: 3, 2, 1, 0 , 2 将这个用图形展示出来的,就是直方图.好了,開始制作吧~ 1. 数据 首先

【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

什么是桑基图 用D3绘制简单的Sankey图 添加文字 圆形节点 添加交互效果 注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量,人口,经济等的流动情况.最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出.Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图

【 D3.js 进阶系列 — 4.0 】 绘制箭头

在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头.本文介绍如何在 D3 中给直线和曲线添加箭头. 到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的.那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的. 1. 在 SVG 中定义箭头的标识 定义箭头的标识如下,先写一对 <defs> ,里面再写一对 <marker>,其中 marker 的属性的意义为: vie

【 D3.js 入门系列 --- 10 】 地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示 源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

使用D3.js绘制地图并打点

本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件 去网上下载要绘制地图的geoJson文件. 使用d3.json()加载地图文件,这里为了方便加载我把geoJson文件放在了js文件里. 绘制地图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>