title: Equal Space between the legends in d3
body: <p>I am newbie in using d3 library, I am trying to  have equal space between the legends. In the current stage of my work -attached- does not provide equal spaces. </p>
  
  <p>I would like to know how I could able to fix.</p>
  
  <p><img src="https://i.stack.imgur.com/aLSdm.png" alt="enter image description here"></p>
  
  <p>Here is the code that I have so far:</p>
  
  <pre><code>var margin = { top: 20, right: 50, bottom: 30, left: 60 };
  
      self.drawLegends = function () {
  
              var legendData = [{ "color": "blue", text: "Normal Distribution" }, { color: "green", text: " Ave A" }, { color: "red", text: "Ave B" }]
              var legends = self.svg.selectAll("g legends").data(legendData);
              var legendBox = legends.enter()
                   .append("g")
                   .attr("transform", function (d, i) { return "translate(" + parseFloat((i + 1) * (($("#chart").width() - margin.left - margin.right) / 4)) + ",-10)" })
  
          var circles = legendBox.append("circle")
              .attr("r", 5)
              .attr("stroke", "black")
              .attr("fill", function (d, i) { return d.color })
  
          legendBox.append("text")
             .attr("dx", function (d) { return 10 })
             .attr("dy", function (d) { return 5 })
             .attr("fill","white")
             .text(function (d) { return d.text })
      },
  </code></pre>