2016年10月_理想主义文艺青年

原创 d3.js 堆栈图

之前画过矩阵图堆栈图是把一个矩阵分成几个层次分别表示不同的类型的值另外今晚发现d3.js那个链接只能在翻墙的时候能用？？？堆栈图.axis path,.axis line{ fill: none; stroke: black; shape-rendering: crispEdges;} .axis text { font-family: sans-se

2016-10-29 01:38:01 1880 1

原创 D3.js给饼状图添加提示框

添加交互效果当鼠标移动到某一块时显示该块表示的产商的出货量饼状图 .tooltip{ position: absolute; width: 120px; height: auto; font-family: simsun; font-size: 14px; text-align: center; colo

2016-10-16 16:32:02 7546 2

原创 D3.js 布局の饼状图

饼状图需要将数据转换为角度弧开始和结束的角度然后将各产商所占的百分比在饼状图上输出 10.2 饼状图 var width=400;var height=400;var svg=d3.select("body") .append("svg") .attr("width",width)

2016-10-16 15:01:10 2419

原创 D3.js添加了过渡效果的柱形图

通过过渡效果使柱形和文字渐渐升到应该到的位置并弹几次动态柱形图 .axis path,.axis line{ fill:none; stroke:black; shape-rendering:crispEdges;}.axis text { font-family: sans-serif; font-size: 11px;}.MyRect { fil

2016-10-15 01:29:57 3128

原创 D3.js 动态散点图

之前画过一个静态的散点图数据是固定的点的呈现也是静态的在这通过过渡的使用可以动态的显示点的变化动态散点图 .axis path,.axis line{ fill:none; stroke:black; shape-rendering:crispEdges;}.btnWrap{ margin-left: 140px; margi

2016-10-14 16:17:11 4601

原创 D3.js画折线图

将中国和日本的GDP数据进行对比通过折线图可以看出增长趋势折线图的制作 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } --> var width=500;var height=500;var dataset=[ {

2016-10-13 16:10:06 16301

原创 D3.js散点图

通过D3.js 在坐标轴中画散点坐标轴中X Y轴都需要设置成线性比例尺为了避免点挤到一块使用比例尺将它们放大另外在使用点的x y坐标时需要与设置的x y坐标轴相对应避免出现显示的点的位置不对的情况散点图 .axis path,.axis line{ fill:none; stroke:black; shape-rendering:crispEdges;

2016-10-13 02:34:17 3667 1

原创 D3.js 完整的柱形图

之前已经写过了一个柱形图但是那个并没有坐标轴在这里来一个带坐标轴的柱形图柱形图中 y轴可根据数据的值进行缩放按照一定的比例完整的柱形图 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } .axis text{ f

2016-10-13 01:24:58 811

原创 D3.js 量子比例尺

图中有几个圆圆的半径越小颜色越深 --> var quantize=d3.scale.quantize() .domain([50,0]) .range(["#888","#666","#444","#222","#000"]); var r=[45,35,25,15,5]; var svg=d3.select("body").app

2016-10-12 20:19:18 834

原创使用D3.js实现柱形图的制作

通过矩形的长短表示数据1.静态定义一些数据然后显示数据柱形图CatDog -->var dataset=[50,43,120,87,99,167,142];var width=400;var height=400;var svg=d3.select("body") .append("svg") .attr("width",width) .a

2016-10-11 01:06:19 2438 1

youngkl博客