Javascript D3图例放置

我有一个有很多标签的甜甜圈图表，需要把标签最好放在一个无序的列表中，这样它们就会根据父元素的大小调整大小。 我将继续这个例子：

我仍然不能完全理解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);

（功能（d3）{
"严格使用",；
var宽度=760；
var高度=760；
变量半径=数学最小值（宽度、高度）/2；
var donutWidth=275；
变量legendRectSize=18；
var legendSpacing=4；
var color=d3.scale.category20b（）；
var svg=d3。选择（“#图表”）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（+）（宽度/2）+
",；
var arc=d3.svg.arc（）
.内半径（半径-宽度）
.外层（半径）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d.count；}）
.sort（空）；
变量工具提示=d3。选择（“#图表”）
.append（'div'））
.attr（'class'，'tooltip'）；
工具提示。追加（'div'）
.attr（'class'，'label'）；
工具提示。追加（'div'）
.attr（'class'，'count'）；
工具提示。追加（'div'）
.attr（“类别”、“百分比”）；
d3.json（'http://localhost:8080/product_sales/123/2014.01.01/2014.12.31，函数（错误，数据）{
console.log（数据集）；
var数据集=[]；
for（var输入数据）{
if（data.hasOwnProperty（key））{
var obj={
计数：数据[键]，
启用：对，
标签：键
};
数据集推送（obj）；
}
}
var path=svg.selectAll（'path'）
.数据（饼图（数据集））
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d，i）{
返回颜色（d.数据.标签）；
})
.each（函数（d）{this.\u current=d；}）；
path.on（'mouseover'，函数（d）{
var total=d3.sum（dataset.map）（函数（d）{
返回（d.enabled）？d.count:0；
}));
变量百分比=数学四舍五入（1000*d.data.count/总数）/10；
工具提示。选择（'.label'）.html（d.data.label）；
工具提示。选择（'.count'）.html（“$”+d.data.count）；
工具提示。选择（'.percent'）.html（percent+'%'）；
样式（'display'，'block'）；
});
path.on（'mouseout'，function（）{
样式（'display'，'none'）；
});
path.on（'mousemove'，函数（d）{
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（））
.输入（）
.append（'g'）
.attr（'类'，'图例'）
.attr（'transform'，函数（d，i）{
变量高度=legendRectSize+legendSpacing；
var offset=height*color.domain（）.length/2；
var horz=-2*legendRectSize；
var vert=i*高度-偏移量；
返回“translate”（“+horz+”，“+vert+”）；
});
图例.append（'rect'）
.attr（'width'，legendRectSize）
.attr（'height'，legendRectSize）
.style（'填充'，颜色）
.style（'笔划'，颜色）
.on（'click'，函数（标签）{
var rect=d3。选择（此）；
var enabled=true；
var totalEnabled=d3.sum（dataset.map）（函数（d）{
返回（d.enabled）？1:0；
}));
if（rect.attr（'class'）='disabled'）{
直接属性（'class'，''）；
}否则{
如果（totalEnabled<2）返回；
rect.attr（'class'，'disabled'）；
启用=错误；
}
饼图值（函数（d）{
如果（d.label==标签）d.enabled=已启用；
返回（d.enabled）？d.count:0；
});
path=path.data（饼图（数据集））；
path.transition（）
.持续时间（750）
.attrween（'d'，函数（d）{
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
返回弧（插值（t））；
};
});
});
图例.append（'text'）
.attr（'x'，legendRectSize+legendSpacing）
.attr（'y'，legendRectSize-legendSpacing）
.text（函数（d）{return d；}）；
});
})（窗口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>

馅饼
h1{
字体大小：14px；
文本对齐：居中；
}
#图表{
高度：760像素；
保证金：0自动；
位置：相对位置；
宽度：760px；
}
.工具提示{
背景：#eee；
盒影：0 0 5px#999999；
颜色：#333；
显示：无；
字体系列：无衬线；
字体大小：14px；
左：0；
填充：10px；
位置：绝对位置；
文本对齐：居中；
顶部：95px；
宽度：80px；
z指数：10；
}
.传奇{
字体大小：14px；
字体系列：无衬线；
浮动：左；
}
直肠{
光标：指针；
笔画宽度：2；
}
直肠残疾{
填充：透明！重要；
}

链接到的示例将根据父元素的大小和位置放置图例。你只是想随着切片数量的增加而缩小它的尺寸吗？当字体大小变得太小而无法阅读时，您的计划是什么？我更喜欢将每个元素与另一个元素内联放置在图表下方。