title: Need to create a line within x and y axis in d3 v5
body: <p>I have a bar chart graph, created with d3 v5, which needs to have a straight line as a "limit" depending on a specific y value. </p>
  
  <p>This is the graph I currently have and the line which should be created (added on paint)</p>
  
  <p><a href="https://i.stack.imgur.com/hcLdE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hcLdE.png" alt="enter image description here"></a></p>
  
  <p>Here is the code in order to create the graph</p>
  
  <pre><code>(async ()=&gt; {
  
  const response = await fetch('https://api);
  const myJson = await response.json();
  //need myJson.DailyDelvs to be the y value of the line
  
  // set the dimensions and margins of the graph
  var margin = {top: 30, right: 30, bottom: 70, left: 60},
      width = 400 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom
      tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return "DAY: "+d.DIA+"&lt;br/&gt;PO: "+d.PO_ID })
  
  // append the svg object to the body of the page
  var svg = d3.select("#dailyDeliveryVolume")
    .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)
  
    var datos
  // get the data
  d3.json("https://api2").then(function(data) {
  
  datos = data
  d3.select("#dailyDeliveryVolume_spinner").remove();
  
  var x = d3.scaleBand()
  .range([ 0, width ])
  .domain([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31])
  .padding(0.05);
  
  var xAxis = d3.axisBottom(x)
  .tickValues(x.domain().filter(function(d,i){ return !(i%2)}));
  
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  
  var y = d3.scaleLinear()
  .domain([0, d3.max(data.STD, function(d) { return +d.PO_ID })])
  .range([ height, 0]);
  
  svg.append("g")
    .call(d3.axisLeft(y))
  
  // Bars
  svg.selectAll("mybar")
    .data(data.STD)
    .enter()
    .append("rect")
      .attr("x", function(d) { return x(d.DIA); })
      .attr("y", function(d) { return y(d.PO_ID); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.PO_ID); })
      .attr("fill", "#69b3a2")
      .attr("border-color", "black")
      .on("mouseover", tip.show)
      .on("mouseleave", tip.hide )
  
  })
  })()
  </code></pre>
  
  <p>In order to create the line, I tried the following code, right after I append the bars, which is causing an error</p>
  
  <pre><code>
  var linea = drawLine(svg, x, y, data.STD);
  
  var drawLine = function(svg, x, y, data) {
    var lineFunc = d3.line()
      .x(function(obj) {
        return x(obj.DIA);
      })
      .y(function(obj) {
        return y(obj.PO_ID);
      });
  
    var linea = svg.append("linea") //SVG Paths represent the outline of a shape that can be stroked, filled, used as a clipping path, or any combination of all three. We can draw rectangles, circles, ellipses, polylines, polygons, straight lines, and curves through path
    .attr("d", lineFunc(data))
    .attr("stroke", '#87CEEB')
    .attr("stroke-width", 3)
    .attr("fill", "black");
  
    return linea;
  };
  </code></pre>
  
  <blockquote>
    <p>dailyDeliveryVolume.js:64 Uncaught (in promise) TypeError: drawLine is not a function at dailyDeliveryVolume.js:64</p>
  </blockquote>
  
  <p>I also tried to directly append a line to the svg with fixed attributes x1, x2, y1 and y2 but seems it is done base on the entire container and can't get to suit the x and y axis values. </p>
  
  <p>The goal is that myJson.DailyDelvs is the y value (based on the y scale values) and then is just stright thru all width.</p>