D3.JS 基于javascript的图表展示库<六>-基本柱状图2

本文链接：https://blog.youkuaiyun.com/a6383277/article/details/8768412

本文介绍了D3.js库中用于创建基本柱状图的方法，特别是重点解析了d3.scale.ordinal().domain(data).rangeBands([0, 480])函数的用途，该函数在柱状图的生成过程中起到关键作用。" 78626299,7169362,Android TabLayout+ViewPager+Fragment 实现标题栏与内容联动教程,"['Android开发', 'UI设计', '布局管理', '页面切换', 'Android框架']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴图.....

这个和上篇相比多了一点点东西。所以就简单说明一下。

重要的一个函数是

d3.scale.ordinal() .domain(data).rangeBands([0, 480]); 这个的作用与上篇介绍的d3.scale.linear()提供类似的功能。

贴代码：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data</title>
<link rel="stylesheet" type="text/css" href="bar.css"/>
<script type="text/javascript" src="lib/d3.v3.js"></script>
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
hor:
<div id="svg"></div>
<br />================================<br />
vir:
<div id="vir">
</div>
</body>
</html>

bar.css

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

.chart rect{
    stroke:white;
    fill:steelblue;
}

bar.js

function svgBarChart(){
    var data = [4, 8, 15, 16, 23, 42];
    var chart = d3.select("div#svg").append("svg")
    .attr("class", "chart")
    .attr("width", 440)
    .attr("height", 140)
    .append("g")
    .attr("transform", "translate(10,15)");//设置位移俩 可以在条形统计图上右键--审查元素。看看是实际效果
    
    
    
    var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);
    
    var y = d3.scale.ordinal()
    .domain(data)
    .rangeBands([0, 120]);
      
    chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", y)
    .attr("width", x)
    .attr("height", y.rangeBand());
    
    
    chart.selectAll("text")
    .data(data)
    .enter().append("text")
    .attr("x", x)
    .attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
    .attr("dx", -3) // padding-right
    .attr("dy", ".35em") // vertical-align: middle
    .attr("text-anchor", "end") // text-align: right
    .text(String);
    
    
    chart.selectAll("line")
    .data(x.ticks(10))
    .enter().append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", 120)
    .style("stroke", "#ccc");
    
    chart.selectAll(".rule")
    .data(x.ticks(10))
    .enter().append("text")
    .attr("class", "rule")
    .attr("x", x)
    .attr("y", 0)
    .attr("dy", -3)
    .attr("text-anchor", "middle")
    .text(String);

    chart.append("line")
    .attr("y1", 0)
    .attr("y2", 120)
    .style("stroke", "#000");
}

function svgVirBarChart(){
 var data = [4, 8, 15, 16, 23, 42];
 var height = 440;
 var width = 500;
 var chart = d3.select("div#vir").append("svg")
    .attr("class", "chart")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(30,-8)");//图形水平位移量
    
 var y = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);//设置权重计算
    
 var x = d3.scale.ordinal()
    .domain(data)
    .rangeBands([0, 480]);
    //散列值 把480平均分配到data的每个数据段（这里是6个） 0~80，80~160,...值为（0，80，160，...）域宽80
    
 chart.selectAll("rect").data(data).enter().append("rect")
 .attr("x",x)//相当于function(d){return x(d);}
 .attr("y",function(d){return height-y(d)})//svg的坐标以左上角为原点，同过高度运算转成原点在左下角的效果
 .attr("width",x.rangeBand()) //获取散列值每段的长度 为矩形的宽
 .attr("height",y); // 通过函数1  function(d){return  (420/42)*d}  得到矩形的高
 
  //添加矩形上方的数字
 chart.selectAll("text")
    .data(data)
    .enter().append("text")
    .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })  //散列值+散列宽度的一半
    .attr("y",function(d){return height-y(d)})
    .attr("dx", ".35em") //  horizontal-align: middle 居中对齐
    .attr("dy", 0) // vertical-align: middle //垂直方向无偏移
    .attr("text-anchor", "end") // text-align: right
    .text(String); //设置数据为显示值 相当于.text(function(d){ return d;})
    
 
  chart.selectAll("line") //加横线 线 有关svg的标签请查看w3chool
    .data(y.ticks(10))   //y.ticks 根据权重 把数据进行划分层次，增加可读性。可以自己改变ticks的值察看效果来理解
    .enter().append("line")
    .attr("x1", 0)
    .attr("x2", 480)
    .attr("y1", function(d){return height -y(d)})
    .attr("y2", function(d){return height -y(d)})  //画线 （x1,y1） ------> (x2,y2)
    .style("stroke", "#ccc");
 
 
 chart.selectAll(".rule")
    .data(y.ticks(10))
    .enter().append("text")
    .attr("class", "rule")
    .attr("y",function(d){return height-y(d)})
    .attr("dy",5)
    .attr("dx",-8)
    .attr("text-anchor", "middle")
    .text(String); //添加Y 轴方向的数字
    
    chart.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1",height)
    .attr("y2",height)
    .style("stroke", "#000");//添加x轴方向的线
    
    chart.append("line") //添加Y轴方向的线
    .attr("x1", 0)
    .attr("x2",0)
    .attr("y1",0)
    .attr("y2",height)
    .style("stroke", "#000");
  
}

window.onload = function(){
  //  divBarChart();
    svgBarChart();
    svgVirBarChart();
};

代码下载地址 http://download.youkuaiyun.com/detail/a6383277/5230113