2

I am trying to generate bar chart using d3.js.But my code is not showing the text i have appended on rect.I call a function that displays the the bar chart.My code is as follows my code:

function renderChartVertical(data)
{
    var margin = {top: 20, right: 20, bottom: 150, left: 100},
    width = 600 - margin.left - margin.right,
    height =400 - margin.top - margin.bottom;


var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

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

var svg = d3.select("#chart").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 + ")");
svg.call(tip);
  x.domain(data.map(function(d) { return d.key; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
       .attr("class", "barsLables")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.5em")
      .attr("dy", "0.1em")
      .attr("transform", "rotate(-45)" );

  svg.append("g")
      .attr("class", "gridLineLabels")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
    .attr("class", "bars")
      .attr("x", function(d) { return x(d.key); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })    
      .attr("height", function(d) { return height - y(d.value); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

  svg.selectAll("rect")
.append("text")
.attr("class", "below")
//.attr("x", 12)
//.attr("dy", "1.2em")
.attr("text-anchor", "end")
.text(function(d) { return d.value; });

//  svg.selectAll("bar")
//  
//  .attr("height", 0)
//  .transition()
//  .delay(100000000) ;     
}

The text on vertical bars is not showing.plz guide

Łukasz
  • 2,131
  • 1
  • 13
  • 28
rashmi
  • 27
  • 5
  • can you create a jsfiddle to show the issue? – Sajeetharan Sep 17 '15 at 06:59
  • creating js fiddle wud not be possible as is the project code is quite complex one.But i can explain where the problem is: when I select all rect and append text to them.The text gets appened to rectangles but does not show on the screen the values .The text is appended can be seen via the Inspect Element of google chrome.........svg.selectAll("rect") .append("text") .attr("class", "below") //.attr("x", 12) //.attr("dy", "1.2em") .attr("text-anchor", "end") .text(function(d) { return d.value; }); – rashmi Sep 17 '15 at 07:15

1 Answers1

2

In your Question It looks like you are trying to append text in side rect well that is not possible

If you want add text on vertical bar then

  • create 'g' group element
  • first append rect element in group
  • second append text element in group
<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect x="0" y="0" width="100" height="100" fill="red" ></rect>
  <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue" > Hello </text>
</g>
</svg>

Working d3 demo

Community
  • 1
  • 1
vijay
  • 10,276
  • 11
  • 64
  • 79