D3绘制柱状图

来源：互联网发布：人人商城v2 数据库编辑：程序博客网时间：2024/05/20 03:44

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

效果图

这里写图片描述

0 0

D3绘制柱状图

D3绘制柱状图

HTML bar.html

CSS bar.css

JavaScript bar.js

Data data.tsv

效果图

HTML `bar.html`

CSS `bar.css`

JavaScript `bar.js`

Data `data.tsv`