score:1

Accepted answer

the texts will never show up because you're appending them to a <rect> element.

however, you don't even need to append the texts as separate elements. since you already have a scale, simply use an axis generator:

var yaxis = d3.axisleft(heightscale);

var gx = svg.append("g")
    .attr("transform", "translate(" + margin.left + "0,)")
    .call(yaxis);

here is your code with the axis:

var csv = `vendor,units2016,share2016,units2015,share2015
samsung,"306,446.60",20.5,"320,219.70",22.5
apple,"216,064.00",14.4,225850.6,15.9
huawei,"132,824.90",8.9,"104,094.70",7.3
oppo,"85,299.50",5.7,"39,489.00",2.8
bbk communication,"72,408.60",4.8,"35,291.30",2.5
others,"682,313.30",45.6,"698,955.10",49.1`;

var fullw = 320;
var fullh = 240;

var margin = {
  top: 1,
  right: 25,
  bottom: 25,
  left: 120
}

var widthscale = d3.scalelinear()
  .range([0, fullw]);

var heightscale = d3.scaleband()
  .rangeround([0, fullh])
  .paddinginner(0.2);


var svg = d3.select("body")
  .append("svg")
  .attr("width", fullw + margin.left + margin.right)
  .attr("height", fullh + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var data = d3.csvparse(csv);

var barcolor = d3.scalelinear()
  .domain([0, d3.max(data, function(d) {
    return +d.share2016;
  })])
  .range(["#e6f5ff", "blue"])
  .interpolate(d3.interpolatehcl);

widthscale.domain([0, d3.max(data, function(d) {
  return +d.share2016;
})]);

heightscale.domain(data.map(function(d) {
  return d.vendor;
}));

var bars = svg.selectall("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d) {
    return heightscale(d.vendor);
  })
  .attr("width", function(d) {
    return widthscale(+d.share2016);
  })
  .attr("height", heightscale.bandwidth())
  .style("fill", function(d, i) {
    return barcolor(i);
  });

var yaxis = d3.axisleft(heightscale).ticksizeouter(0);
var gx = svg.append("g")
  .attr("transform", "translate(" + margin.left + "0,)")
  .call(yaxis);
<script src="//d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag