CODEWITHSUNDEEP
javascriptd3.jschartslabel
Fabio
Fabio

Reputation: 159

Horizontal bar chart d3.js not showing label

I've an horizontal bar chart in d3.js and I would like to add the name like "y-label" for every bar of the chart.

The original example of my bar chart is http://bl.ocks.org/mbostock/2368837 without negative values. So I modified it for my purpose

var margin = {top: 40, right: 20, bottom: 100, left: 60},
width = 720 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;

var x_4 = d3.scale.linear()
    .range([0, width])

var y_4 = d3.scale.ordinal()
    .rangeRoundBands([0, height], .2);

var xAxis_4 = d3.svg.axis()
    .scale(x_4)
    .orient("top");

var tip_4 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
  return "<strong>Value:</strong> <span style='color:red'>" + d.ln_numfollowers + "</span>";
})

var sampleSVG_4 = d3.select("#LinkedIn").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(tip_4);

d3.csv("@routes.Assets.at("d3/linkedin_competitor_prova.csv")", type, function(error, data) {
  x_4.domain(d3.extent(data, function(d) { return d.ln_numfollowers; })).nice();
  y_4.domain(data.map(function(d) { return d.organization_name; }));

  sampleSVG_4.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) { return d.ln_numfollowers < 0 ? "bar negative" : "bar positive"; })
      .attr("x", function(d) { return x_4(Math.min(0, d.ln_numfollowers)); })
      .attr("y", function(d) { return y_4(d.organization_name); })
      .attr("width", function(d) { return Math.abs(x_4(d.ln_numfollowers) - x_4(0)); })
      .attr("height", y_4.rangeBand())
      .on('mouseover', tip_4.show)
        .on('mouseout', tip_4.hide);;

  sampleSVG_4.append("g")
      .attr("class", "x axis")
      .call(xAxis_4);

  sampleSVG_4.append("g")
      .attr("class", "y axis")
    .append("line")
      .attr("x1", x_4(0))
      .attr("x2", x_4(0))
      .attr("y2", height)  
});

function type(d) {
  d.ln_numfollowers = +d.ln_numfollowers;
  return d;
}

The csv data file is:

organization_name,ln_numfollowers

Carrot.mx,100 CarJump,45

I don't know why the organization_name is not showing. As you can see, not even in the original example the label on the y axis are showing.

Upvotes: 0

Views: 733

Answers (1)

Mark
Mark

Reputation: 108512

Couple of problems:

1.) You probably don't want to create your x-axis using extent. With your sample data this would create a chart from 45 to 100. You probably want to start it at zero.

x_4.domain([0,d3.max(data, function(d) { return d.ln_numfollowers; })]);

2.) You don't actually create a conventional y-axis. This code:

sampleSVG_4.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("x1", x_4(0))
  .attr("x2", x_4(0))
  .attr("y2", height)

Is creating a y-axis that's just a line. It's not using the built-in d3axis creation. What you need is:

var yAxis_4 = d3.svg.axis()
    .scale(y_4)
    .orient("left");

....

sampleSVG_4.append("g")
  .attr("class", "y axis")
  .call(yAxis_4);

Example here.

Upvotes: 1

Related Questions