D3学习笔记：水平柱状图表

最新推荐文章于 2022-01-30 18:24:33 发布

weixin_33744141

最新推荐文章于 2022-01-30 18:24:33 发布

阅读量298

点赞数

文章标签： git javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009123901

版权

github仓库

戳这里镜心的小树屋

不用svg

图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>d3 | bar chart</title>
    <link rel="stylesheet" href="">
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <div class="chart"></div>
    <script>
        var data = [4,8,15,16,23,42,12];
        
        var x = d3.scale.linear()
           .domain([0, d3.max(data)])   
           .range([0, 420]);

        
    /* 下面代码的运行结果是生成一个条状图，但是没有对条状图的长度进行控制，下面采用scale.linear方法对数据长度进行设置。 */
        d3.select(".chart")
        .selectAll("div")
        .data(data)  //data方法用于对选中的结果集绑定数据。
        .enter().append("div")  //enter方法和append方法表示由于此时div元素还不存在，必须根据数据的个数将它们创造出来。
        .style({'width': function (data) {return x(data) + "px";} ,"background": "black","border": "2px solid #fff","color": "#fff"})
        .text(function(data) {return data;});  

        //style方法和text方法的参数是函数，表示函数的运行结果就是设置网页元素的值
    
    
     


/*reference*/

//  http://www.danasilver.org/github-language-stats/

// http://javascript.ruanyifeng.com/library/d3.html

    </script>
</body>
</html>

用svg

效果

水平柱状图表

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>linechart</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div id="container"></div>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

var data = [1,6,4,3,3,8,5,4,3,7],
bar_height = 50,
bar_padding = 10,
height = (bar_height + bar_padding)*data.length,
width = 600;


var scale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([0,width]);

var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)

var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
  return "translate(0,"+i*(bar_height+bar_padding)+")";
})

bar.append("rect").attr("width",function(d){return scale(d);})
.attr("height",bar_height
).style("fill","steelblue")

bar.append("text").text(function(d){return d;}).attr("x",function(d){return scale(d+0.1);}).attr("y",bar_height/2)

注意

d3.v3版本： d3.scale.linear()
d3.v4版本： d3.scaleLinear()
参考
https://bost.ocks.org/mike/
http://www.imooc.com/video/4743

http://javascript.ruanyifeng....
http://www.danasilver.org/git...
D3.js柱状图例子

weixin_33744141

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3学习笔记：水平柱状图表

github仓库戳这里镜心的小树屋不用svg<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
复制链接

扫一扫

D3学习笔记： 水平柱状图表

github仓库

不用svg

用svg

效果

代码

注意

D3学习笔记：水平柱状图表