title: How to add line and text as a label to a rectangle in D3?
body: <p>I have a bar which looks like this, the values for A B and C do change a little bit in the data but all follow the same sort of trend and are out of 100.</p>
  
  <p><a href="https://i.stack.imgur.com/V8AWQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V8AWQ.png" alt="Bar before"></a></p>
  
  <p>The trouble I am now having is how to add lines in the centre of each of the graphs with a little bit of text on each one. I have tried appending a path but it doesn't work for some reason.</p>
  
  <p>Another issue I am having is how to make the entire bar have whole striped white lines going across it but go underneath. The answer <a href="https://css-tricks.com/stripes-css/" rel="nofollow noreferrer">here</a> doesn't change the bars for me. Would I have to place another bar on top of these with the line gradient to do this too? </p>
  
  <p><a href="https://i.stack.imgur.com/1fgl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1fgl0.png" alt="Bar after"></a></p>
  
  <pre><code>var A = 89;
  var B = 6;
  var C = 5;
  
  var A = parseInt(A);
  var B = parseInt(B);
  var C = parseInt(C);
  
  var margin = {
    top: 60,
    right: 70,
    bottom: 40,
    left: 65
  }
  
  
  var width = '100%';
  var data = [{
    "Percentage": (A + B + C),
    "Name": "A"
  }, {
    "Percentage": (B + C),
    "Name": "B"
  }, {
    "Percentage": C,
    "Name": "C"
  }]; 
  var data1 = [A, B, C];
  var chart = d3.select("#ChartAreaDiv").append("svg") 
    .attr("class", "chart")
    .attr("width", width)
    .attr("height", 200 - margin.top - margin.bottom)
  
  var x = d3.scaleLinear() 
    .domain([0, d3.max(data, function(d) {
      return d.Percentage;
    })])
    .range([0, width]);
  
    var x1 = d3.scaleLinear() 
      .domain([0, d3.max(data1, function(d) {
        return d.Percentage;
      })])
      .range([0, width]);
  
  chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("width", function(d) { 
      return x(d.Percentage);
    })
    .attr("height", 30)
    .attr("rx", 4)
    .attr("ry", 4);
  
  chart.selectAll("text") 
  .data(data)
  .enter().append("text")
  .attr("x", function(d) { 
  return x(d.Percentage);
  })
  .attr("y", 15) 
  .attr("dx", -10) 
  .attr("dy", ".42em") 
  .attr("text-anchor", "middle") 
  .style("font-weight", "bold")
  .data(data1)
  .text(String);
  
  chart.append("path")
  .data(data)
  .enter().append("path")
  .attr("stroke-width", 2)
  .style("stroke", "grey")
  .attr("x1", function(d) { 
  return x(d.Percentage)/2;
  })
  .attr("x1", function(d) { 
  return x(d.Percentage)/2;
  })
  .attr('y1', 30)
  .attr('y2', 50);
  </code></pre>