D3Js v4: Bar Chart - Group Every Line into an own Group

Question

I have this horizontal bar chart like in code below. I need a hover and onClick function that selects me the whole line at once and the only thing I could imagine how this is possible, is to have the 3 elements in the same group, so I can work with the group. The first Group would include NA, The bar and 12 and so on. I tried several things with .append('g') but nothing worked so far. How can I group a line togheter?

https://jsfiddle.net/hkfj54Lw/4/

function drawBarChart() {

  //get total global devices in int
  var totalGlobal = 12;

  var barChartData = [{
    "Region": "Germany",
    "Value": 5
  }, {
    "Region": "USA",
    "Value": 3
  }, {
    "Region": "Canada",
    "Value": 6
  }, {
    "Region": "Poland",
    "Value": 12
  }];
  barChartData.sort((b, a) => a.Value - b.Value);


  var margin = {
      top: 0,
      right: 50,
      bottom: 50,
      left: 50
    },
    width = parseInt(d3.select("#barChart").style("width")) - margin.left - margin.right,
    height = parseInt(d3.select("#barChart").style("height")) - margin.top - margin.bottom;


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


  // for (var i = 0; i < barChartData.length; i++) {
  //
  // }


  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width - 50]);

  // Y axis
  var y = d3.scaleBand()
    .range([0, height])
    .domain(barChartData.map(function(d) {
      return d.Region;
    }))
    .padding(0.3);
  svg.append("g")
    .call(d3.axisLeft(y))

  // Global text
  var dummyData = ['1'];
  svg.selectAll(".mytexts2")
    .data(dummyData)
    .enter()
    .append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", "14px")
    .attr("class", "barChartText2")
    .attr("fill", "black !important")
    .attr("x", -42)
    .attr("y", 165)
    .text('Global');
  //Global Value
  svg.selectAll(".mytexts2")
    .data(dummyData)
    .enter()
    .append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", "14px")
    .attr("class", "barChartText2")
    .attr("fill", "black !important")
    .attr("x", 270)
    .attr("y", 165)
    .text(totalGlobal);


  //Bars
  svg.selectAll("myRect")
    .data(barChartData)
    .enter()
    .append("rect")
    .attr("x", x(0))
    .attr("y", function(d) {
      return y(d.Region);
    })
    .attr("width", function(d) {
      return ((x(d.Value)));
    })
    .attr("height", y.bandwidth())
    .attr("class", "barChartBar")
    .attr("fill", "lightgray")

    .append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("class", "heyho")
    .attr("fill", "black")
    .attr("x", width)
    .attr("y", 100)
    .text(function(d) {
      return d.Value;
    });
  // values text
  svg.selectAll(".mytexts")
    .data(barChartData)
    .enter()
    .append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("class", "barChartText2")
    .attr("fill", "black !important")
    .attr("x", width + 30)
    .attr("y", function(d, i) {
      return ((y(d.Region) + y.bandwidth() / 2) + 3);
    })
    .text(function(d) {
      return d.Value;
    });

  // lines between bars
  svg.selectAll(".myLine")
    .data(barChartData)
    .enter()
    .append("line")
    .style("stroke", "lightgray") // colour the line
    .style("stroke-width", 0.5) // adjust line width
    .style("stroke-linecap", "butt") // stroke-linecap type
    .attr("x1", -50) // x position of the first end of the line
    .attr("y1", function(d, i) {
      return ((y(d.Region) + y.bandwidth() / 2) + 17);
    }) // y position of the first end of the line
    .attr("x2", 290) // x position of the second end of the line
    .attr("y2", function(d, i) {
      return ((y(d.Region) + y.bandwidth() / 2) + 17);
    }) // y position of the second end of the line
    .attr("class", "myNewLine");
}


drawBarChart();

                <svg id="barChart"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.0.0/topojson.js" integrity="sha512-FleTrZjeND6L64cXKbLxV5IRYS3UJbEH5UfRYZAjFb4K7DP+TWLSfOYjrQfotgKSwuEId5VO6YkTaGhmP2eGGQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>