D3传奇放置

Question

我有一个带有大量标签的圆环图，需要将标签放在一个无序列表中，这样它们就会根据父元素的大小调整大小。 我将离开这个例子：http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend

我仍然不完全了解D3并且快速使用它。感谢您的任何建议!!

这是我的代码。 的 JS

(function(d3) {
   'use strict';

   var width = 760;
   var height = 760;
   var radius = Math.min(width, height) / 2;
   var donutWidth = 275;
   var legendRectSize = 18;
   var legendSpacing = 4;

   var color = d3.scale.category20b();

   var svg = d3.select('#chart')
     .append('svg')
     .attr('width', width)
     .attr('height', height)
     .append('g')
     .attr('transform', 'translate(' + (width / 2) +
       ',' + (height / 2) + ')');

   var arc = d3.svg.arc()
     .innerRadius(radius - donutWidth)
     .outerRadius(radius);

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

   var tooltip = d3.select('#chart')
     .append('div')
     .attr('class', 'tooltip');

   tooltip.append('div')
     .attr('class', 'label');

   tooltip.append('div')
     .attr('class', 'count');

   tooltip.append('div')
     .attr('class', 'percent');

   d3.json('http://localhost:8080/product_sales/123/2014.01.01/2014.12.31', function(error, data) {

     console.log(dataset);
     var dataset = [];
      for (var key in data) {
       if (data.hasOwnProperty(key)) {
        var obj = {
          count: data[key],
          enabled:true,
          label:key
        };
        dataset.push(obj);
        }
      }

     var path = svg.selectAll('path')
       .data(pie(dataset))
       .enter()
       .append('path')
       .attr('d', arc)
       .attr('fill', function(d, i) {
         return color(d.data.label);
       })
       .each(function(d) { this._current = d; });

     path.on('mouseover', function(d) {
       var total = d3.sum(dataset.map(function(d) {
         return (d.enabled) ? d.count : 0;
       }));
       var percent = Math.round(1000 * d.data.count / total) / 10;
       tooltip.select('.label').html(d.data.label);
       tooltip.select('.count').html("$"+d.data.count);
       tooltip.select('.percent').html(percent + '%');
       tooltip.style('display', 'block');
     });

     path.on('mouseout', function() {
       tooltip.style('display', 'none');
     });


     path.on('mousemove', function(d) {
       console.log((d3.event.pageX - 100)+', '+(d3.event.pageY + 10));
       tooltip.style('top', (d3.event.offsetY+10) + 'px')
         .style('left', (d3.event.offsetX+10) + 'px');
     });



     var legend = svg.selectAll('.legend')
       .data(color.domain())
       .enter()
       .append('g')
       .attr('class', 'legend')
       .attr('transform', function(d, i) {
         var height = legendRectSize + legendSpacing;
         var offset =  height * color.domain().length / 2;
         var horz = -2 * legendRectSize;
         var vert = i * height - offset;
         return 'translate(' + horz + ',' + vert + ')';
       });

     legend.append('rect')
       .attr('width', legendRectSize)
       .attr('height', legendRectSize)
       .style('fill', color)
       .style('stroke', color)
       .on('click', function(label) {
         var rect = d3.select(this);
         var enabled = true;
         var totalEnabled = d3.sum(dataset.map(function(d) {
           return (d.enabled) ? 1 : 0;
         }));

         if (rect.attr('class') === 'disabled') {
           rect.attr('class', '');
         } else {
           if (totalEnabled < 2) return;
           rect.attr('class', 'disabled');
           enabled = false;
         }

         pie.value(function(d) {
           if (d.label === label) d.enabled = enabled;
           return (d.enabled) ? d.count : 0;
         });

         path = path.data(pie(dataset));

         path.transition()
           .duration(750)
           .attrTween('d', function(d) {
             var interpolate = d3.interpolate(this._current, d);
             this._current = interpolate(0);
             return function(t) {
               return arc(interpolate(t));
             };
           });
       });

     legend.append('text')
       .attr('x', legendRectSize + legendSpacing)
       .attr('y', legendRectSize - legendSpacing)
       .text(function(d) { return d; });

   });

 })(window.d3);

HTML

<!doctype html>
<html>
<head>
<title>Pie</title>
<style>
 h1{
  font-size: 14px;
  text-align: center;
}
#chart {
  height: 760px;
  margin: 0 auto;
  position: relative;
  width: 760px;
}
.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  display: none;
  font-family: sans-serif;
  font-size: 14px;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 80px;
  z-index: 10;
}
.legend {
  font-size: 14px;
  font-family: sans-serif;
  float:left;
}
rect {
  cursor: pointer;
  stroke-width: 2;
}
rect.disabled {
  fill: transparent !important;
}

</style>
</head>
<body>
<div id="chart"></div>


 <script src="../bower_components/d3/d3.min.js"></script>
 <script src="/js/tip/new.js"></script>
</body>
</html>