D3绘制柱状图

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

效果图

这里写图片描述

d3.js是一个流行的JavaScript库,专用于数据驱动的文档可视化,由Mike Bostock创建。它非常适合生成各种复杂的图表,包括柱状图。在d3.js中,绘制柱状图的基本步骤通常涉及以下几个关键步骤: 1. **选择元素**:首先,你需要获取HTML中的容器元素,作为图表的基础。 ```javascript var svg = d3.select(&#39;body&#39;).append(&#39;svg&#39;); ``` 2. **设置尺寸**:定义SVG画布的大小,以及每个柱子的宽度和间距。 ```javascript svg.attr(&#39;width&#39;, width).attr(&#39;height&#39;, height); var barWidth = width / data.length; ``` 3. **创建条形**:对于每一条数据,创建一个矩形元素(bar),并计算其位置。 ```javascript data.forEach(function(d) { var rect = svg.append(&#39;rect&#39;) .attr(&#39;x&#39;, x + xScale(d.category)) .attr(&#39;y&#39;, height - yScale(d.value)) // 柱子顶部 .attr(&#39;width&#39;, barWidth) .attr(&#39;height&#39;, function(d) { return yScale(d.value); }); }); ``` 4. **轴标签**:添加坐标轴和标签,通常包括X轴的数据刻度和Y轴的数值。 ```javascript var xAxis = d3.axisBottom(xScale); svg.append(&#39;g&#39;) .attr(&#39;transform&#39;, &#39;translate(0,&#39; + height + &#39;)&#39;) .call(xAxis); var yAxis = d3.axisLeft(yScale); svg.append(&#39;g&#39;) .call(yAxis); ``` 5. **数据绑定和缩放**:`xScale` 和 `yScale` 是转换函数,将数据值映射到视口坐标。 完整示例可能看起来像这样: ```javascript // 更多细节如设置scales、配置动画等... ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值