d3 바차트 프로토타이핑

d3-horizontal-barchart.js

var data = [
  {l:"개인", v:55, t:1},
  {l:"기관", v:343, t:2},
  {l:"외인", v:332, t:1}
];
  
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var w = 500; 
var h = 80 - margin.bottom - margin.top;
var barWidth = w / data.length;
 
var canvas = d3.select("body")
    .append('svg')
    .attr('class', 'chart') 
    .attr('width', w)
    .attr('height', h + margin.top + margin.bottom);
 
function getColor(t) {
  return {1:"#f11",2:"#28f"}[t] || "#ddd";
}

var color = d3.scale.ordinal().range(["#f11", "#f99", "#ddd", "#9cf", "#28f"]);
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.4);
var y = d3.scale.linear().range([h, 0]);
x.domain(data.map(function(d) { return d.l; }));
y.domain([0, d3.max(data, function(d) { return d.v; })]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
var bar = canvas.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d) { return "translate(" + x(d.l) + ",0)"; });

 canvas.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (h + margin.top) + ")")  
      .call(xAxis);

  bar.append("rect")
    .style("fill", function(d) { return getColor(d.t); })
      .attr("y", h + margin.top)
      .attr("height", 0)  
      .attr("width", x.rangeBand())
      .transition().duration(1000)
      .attr("height", function(d) { 
        return h - y(Math.abs(d.v));  
      })
      .attr("y", function(d) {   
        return y(Math.abs(d.v)) + margin.top;
      });
 
  bar.append("text")
      .attr("x", x.rangeBand() / 2)
      .attr("y", h + margin.top + 3) 
      .attr("dy", "-.5em")
      .text(function(d) { return d.v; }) 
      .style({"font-size":"10px", "text-anchor":"middle", "fill":"#ddd"})
      .transition().duration(1000)
      .attr("y", function(d) {  
        return y(Math.abs(d.v)) + 3 + margin.top; 
      });