D3绘制柱状图

最新推荐文章于 2023-04-19 22:38:02 发布

原创最新推荐文章于 2023-04-19 22:38:02 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #d3.js #柱状图

D3 专栏收录该内容

2 篇文章

订阅专栏

D3绘制柱状图

注：使用d3.js v4.5

HTML `bar.html`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bar</title>
    <link rel="stylesheet" type="text/css" href="bar.css">
</head>
<body>
    <div id="container"></div>
</body>
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="bar.js"></script>
</html>

CSS `bar.css`

#container {
  width: 800px;
  margin: 0px auto;
}

.bar {
  fill: steelblue;
}

JavaScript `bar.js`

var margin = {top: 40, right: 20, bottom: 30, left: 40},
    totalWidth = 800,
    totalHeight = 500,
    width = totalWidth - margin.left - margin.right,
    height = totalHeight - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");

// 定义比例尺
var xScale = d3.scaleBand()
               .range([0, width])
               .padding(0.2);
var yScale = d3.scaleLinear()
               .range([height, 0]);
// 定义坐标轴
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale)
              .tickFormat(formatPercent);
// 创建绘图区域
var svg = d3.select("#container")
            .append("svg")
            .attr("width", totalWidth)
            .attr("height", totalHeight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(error, data) {
  xScale.domain(data.map(function(d) {return d.letter;}));
  yScale.domain([0, d3.max(data, function(d) {return d.frequency;})]);
  svg.append("g")
     .attr("class", "x-axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);
  svg.append("g")
     .attr("class", "y-axis")
     .call(yAxis)
     .append("text").attr("transform", "rotate(-90)")
     .attr("y", 6).attr("dy", "0.71em")
     .attr("text-anchor", "end").text("频率");

  svg.append("g")
     .attr("class", "bars")
     .selectAll(".bar")
     .data(data).enter()
     .append("rect").attr("class", "bar")
     .attr("x", function(d) { return xScale(d.letter); })
     .attr("width", xScale.bandwidth())
     .attr("y", function(d) { return yScale(d.frequency); })
     .attr("height", function(d) {
       return height - yScale(d.frequency); 
     });

  // 绘制图例
  var legendWrap = svg.append("g");
  var series = legendWrap.append("g").attr("class", "series");
  series.append("circle")
        .attr("stroke-width", 2)
        .attr("fill", "steelblue")
        .attr("stroke", "steelblue")
        .attr("r", 6);
  series.append("text")
        .attr("font-size", "0.75em")
        .attr("text-anchor", "start")
        .attr("dy", ".32em")
        .attr("dx", 12)
        .text("英文字母");
  var legendWidth = legendWrap.node().getBoundingClientRect().width;
  legendWrap.attr("transform", "translate(" + (width - legendWidth) / 2 + ", -16)");
});

Data `data.tsv`

letter  frequency
A   .08167
B   .01492
C   .02782
D   .04253
E   .12702
F   .02288
G   .02015
H   .06094
I   .06966
J   .00153
K   .00772
L   .04025
M   .02406
N   .06749
O   .07507
P   .01929
Q   .00095
R   .05987
S   .06327
T   .09056
U   .02758
V   .00978
W   .02360
X   .00150
Y   .01974
Z   .00074