图例位置D3

Question

Looking at this codepen (originally from here )

https://codepen.io/anon/pen/KGaGNx?editors=1010#0

I wonder how/why the legend is placed in the middle of the Pie Chart? I can see no CSS Rulesor legend class DOM Element that would indicate why the legend is placed in the middle of the Pie Chart.

HTML

<div class="widget">
    <div class="header">Browser Market Share</div>
    <div id="chart" class="chart-container">

    </div>
</div>

CSS

body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;

}

.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}

.chart-container{
    padding:25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
}

JS

var dataset = [
  { name: "IE", percent: 39.1 },
  { name: "Chrome", percent: 32.51 },
  { name: "Safari", percent: 13.68 },
  { name: "Firefox", percent: 8.71 },
  { name: "Others", percent: 6.01 }
];

var pie = d3.layout
  .pie()
  .value(function(d) {
    return d.percent;
  })
  .sort(null)
  .padAngle(0.03);

var w = 300,
  h = 300;

var outerRadius = w / 2;
var innerRadius = 100;

var color = d3.scale.category10();

var arc = d3.svg
  .arc()
  .outerRadius(outerRadius)
  .innerRadius(innerRadius);

var svg = d3
  .select("#chart")
  .append("svg")
  .attr({
    width: w,
    height: h,
  })
  .append("g")
  .attr({
    transform: "translate(" + w / 2 + "," + h / 2 + ")"
  });

var path = svg
  .selectAll("path")
  .data(pie(dataset))
  .enter()
  .append("path")
  .attr({
    d: arc,
    fill: function(d, i) {
      return color(d.data.name);
    }
  });

path
  .transition()
  .duration(1000)
  .attrTween("d", function(d) {
    var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
    return function(t) {
      return arc(interpolate(t));
    };
  });

var restOfTheData = function() {
  var legendRectSize = 20;
  var legendSpacing = 7;
  var legendHeight = legendRectSize + legendSpacing;

  var legend = svg
    .selectAll(".legend")
    .data(color.domain())
    .enter()
    .append("g")
    .attr({
      class: "legend",
      transform: function(d, i) {
        //Just a calculation for x & y position
        return "translate(-35," + (i * legendHeight - 65) + ")";
      }
    });
  legend
    .append("rect")
    .attr({
      width: legendRectSize,
      height: legendRectSize,
      rx: 20,
      ry: 20
    })
    .style({
      fill: color,
      stroke: color
    });

  legend
    .append("text")
    .attr({
      x: 30,
      y: 15
    })
    .text(function(d) {
      return d;
    })
    .style({
      fill: "#929DAF",
      "font-size": "14px"
    });
};

setTimeout(restOfTheData, 1000);

Why is that?

Answer 1

The g element that contains all the drawing elements is translated to the center of the svg :

 .append("g")
  .attr({
    transform: "translate(" + w / 2 + "," + h / 2 + ")"
  });

This gives all future elements coordinate 0,0 as the center of the svg .