score:1

Accepted answer

I added a new div and wrapped your code in another div so all positions stay relative to eachother

The only new code I had to add was this:

  .on("mouseover", function(d) {

      d3.select("#centerTooltip")
        .classed("hidden", false)
        .html(d.data.str_lab + "<br />" + d.data.num);
  })

And in the div wrapper css I added:

#all {
  margin:auto;
  width: 700px;
}

To make sure that everything aligns properly.

Here's a fork of your code: Plunker


Related Query

More Query from same tag