Skip to content

Instantly share code, notes, and snippets.

@gujc71

gujc71/bar2.html

Last active March 20, 2017 13:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gujc71/cd9747af622f5d5b0f93c84568765d25 to your computer and use it in GitHub Desktop.
Save gujc71/cd9747af622f5d5b0f93c84568765d25 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bar2.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
border: 1px solid;
}
.bar {
fill: skyblue;
}
.bar:hover {
fill: blue;
}
.text {
fill: white;
font-weight:bold;
}
</style>
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// x 축
var dataset = [{x:'A', y:9 }, {x:'B', y:19}, {x:'C', y:29}, {x:'D', y:39},
{x:'E', y:29}, {x:'F', y:19}, {x:'G', y:9 }];
var svg = d3.select("svg");
var width = parseInt(svg.style("width"), 10);
var height = parseInt(svg.style("height"), 10)-20;
var xScale = d3.scaleBand()
.domain(dataset.map(function(d) { return d.x;} ))
.range([0, width]).padding(0.2);
svg.selectAll("rect")
.data(dataset)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function(d, i) {return (d.y*5)})
.attr("width", xScale.bandwidth())
.attr("x", function(d, i) {return xScale(d.x)})
.attr("y", function(d, i) {return (height-d.y*5)});
svg.selectAll("text")
.data(dataset)
.enter().append("text")
.text(function(d) {return d.y})
.attr("class", "text")
.attr("x", function(d, i) {return xScale(d.x)+xScale.bandwidth()/2})
.style("text-anchor", "middle")
.attr("y", function(d, i) {return height-d.y*5 + 15});
svg.append("g")
.attr("transform", "translate(0," + (height) + ")")
.call(d3.axisBottom(xScale));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment