Javascript D3中的多段线和图例间距
我正在使用下面的示例，希望将图例放在饼图之外，并为文本提供多段线以及每个切片的计数和百分比 对于当前代码，我在饼图中有饼图，当我将鼠标悬停在切片上时，会显示文本和百分比 非常感谢你的帮助。谢谢 我不能前进了，谁能帮我一下吗Javascript D3中的多段线和图例间距,javascript,css,d3.js,Javascript,Css,D3.js,我正在使用下面的示例，希望将图例放在饼图之外，并为文本提供多段线以及每个切片的计数和百分比 对于当前代码，我在饼图中有饼图，当我将鼠标悬停在切片上时，会显示文本和百分比 非常感谢你的帮助。谢谢 我不能前进了，谁能帮我一下吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="normalize.css">
<style>
#chart {
height: 360px;
margin: 0 auto; /* NEW */
position: relative;
width: 360px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
left: 130px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 80px;
z-index: 10;
}
.legend {
font-size: 12px;
}
rect {
cursor: pointer; /* NEW */
stroke-width: 2;
}
rect.disabled { /* NEW */
fill: transparent !important; /* NEW */
}
/* NEW */
h1 { /* NEW */
font-size: 14px; /* NEW */
text-align: center; /* NEW */
}
/* NEW */
</style>
</head>
<body>
<div id="chart"></div>
<script src="Scripts/d3.v3.min.js"></script>
<script>
(function(d3) {
'use strict';
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.category20(); //builtin range of colors
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.csv('weekdays.csv', function(error, dataset) {
dataset.forEach(function(d) {
d.count = +d.count;
d.enabled = true; // NEW
});
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
}) // UPDATED (removed semicolon)
.each(function(d) { this._current = d; }); // NEW
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return (d.enabled) ? d.count : 0; // UPDATED
}));
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');
});
/* OPTIONAL
path.on('mousemove', function(d) {
tooltip.style('top', (d3.event.pageY + 10) + 'px')
.style('left', (d3.event.pageX + 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) // UPDATED (removed semicolon)
.on('click', function(label) { // NEW
var rect = d3.select(this); // NEW
var enabled = true; // NEW
var totalEnabled = d3.sum(dataset.map(function(d) { // NEW
return (d.enabled) ? 1 : 0; // NEW
})); // NEW
if (rect.attr('class') === 'disabled') { // NEW
rect.attr('class', ''); // NEW
} else { // NEW
if (totalEnabled < 2) return; // NEW
rect.attr('class', 'disabled'); // NEW
enabled = false; // NEW
} // NEW
pie.value(function(d) { // NEW
if (d.label === label) d.enabled = enabled; // NEW
return (d.enabled) ? d.count : 0; // NEW
}); // NEW
path = path.data(pie(dataset)); // NEW
path.transition() // NEW
.duration(750) // NEW
.attrTween('d', function(d) { // NEW
var interpolate = d3.interpolate(this._current, d); // NEW
this._current = interpolate(0); // NEW
return function(t) { // NEW
return arc(interpolate(t)); // NEW
}; // NEW
}); // NEW
}); // NEW
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
});
})(window.d3);
</script>
</body>
</html>
#图表{
高度：360px；
页边距：0自动；/*新*/
位置：相对位置；
宽度：360px；
}
.工具提示{
背景：#eee；
盒影：0 0 5px#999999；
颜色：#333；
显示：无；
字体大小：12px；
左：130像素；
填充：10px；
位置：绝对位置；
文本对齐：居中；
顶部：95px；
宽度：80px；
z指数：10；
}
.传奇{
字体大小：12px；
}
直肠{
光标：指针；/*新建*/
笔画宽度：2；
}
rect.disabled{/*新建*/
填充：透明！重要；/*新*/
}
/*新的*/
h1{/*新*/
字体大小：14px；/*新*/
文本对齐：居中；/*新建*/
}
/*新的*/
（功能（d3）{
"严格使用",；
var宽度=360；
var高度=360；
变量半径=数学最小值（宽度、高度）/2；
var donutWidth=75；
变量legendRectSize=18；
var legendSpacing=4；
var color=d3.scale.category20（）；//内置颜色范围
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.csv（'weekdays.csv'，函数（错误，数据集）{
dataset.forEach（函数（d）{
d、 计数=+d.count；
d、 enabled=true；//新建
});
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.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）{
tooltip.style（'top'，（d3.event.pageY+10）+'px'）
.style（'left'，（d3.event.pageX+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（'stroke'，color）//已更新（删除分号）
.on（'click'，函数（标签）{//NEW
var rect=d3。选择（此）；//新建
var enabled=true；//新建
var totalEnabled=d3.sum（dataset.map）（函数（d）{//NEW
返回（d.enabled）？1:0；//新建
}))；//新的
如果（rect.attr（'class'）='disabled'）{//NEW
rect.attr（'class'，''）；//新建
}else{//NEW
如果（totalEnabled<2）返回；//新建
rect.attr（'class'，'disabled'）；//新建
enabled=false；//新建
}//新的
pie.value（函数（d）{//NEW
如果（d.label==label）d.enabled=enabled；//新建
返回（d.enabled）？d.count:0；//新建
});
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 + ')';
});
var horz = (-2 * legendRectSize) - legendWidth;
var s = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height);
var legend_group = s.append('g').attr('transform',
'translate(' + (width / 3) + ',' + (height / 1.4) + ')');
var svg = s.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (radius) + ')');
function makePolyLines() {
var polyline = svg.selectAll("polyline")
.data(pie(dataset), key);
polyline.enter()
.append("polyline");
//hide polyline for which value is 0, a case when legend is clicked.
svg.selectAll("polyline").style("display", function(d) {
if (d.value == 0) {
return "none";
} else {
return "block";
}
});
polyline.transition().duration(1000)
.attrTween("points", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline.exit()
.remove();
}
function makeTexts() {
var text = svg.selectAll(".labels")
.data(pie(dataset), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.classed("labels", true)
.text(function(d) {
return d.data.label + " (" + d.data.count + ")";
});
//hide text for which value is 0, a case when legend is clicked.
svg.selectAll(".labels").style("display", function(d) {
if (d.value == 0) {
return "none";
} else {
return "block";
}
});
text.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
})
.styleTween("text-anchor", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start" : "end";
};
});
text.exit()
.remove();
}