Javascript d3饼图未显示所有标签
我正在尝试一个简单的饼图，里面有标签。我可以显示标签，但不能全部显示。e、 g.在示例代码中，我有Rick 5%，Paul 4%和Steve 3%没有显示，因为切片很小。我怎样才能克服这个问题Javascript d3饼图未显示所有标签,javascript,d3.js,Javascript,D3.js,我正在尝试一个简单的饼图，里面有标签。我可以显示标签，但不能全部显示。e、 g.在示例代码中，我有Rick 5%，Paul 4%和Steve 3%没有显示，因为切片很小。我怎样才能克服这个问题 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Testing Pie Chart</title&
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<!--<script type="text/javascript" src="d3/d3.v2.js"></script>-->
<script src="../js/d3.min.js" type="text/javascript"></script>
<style type="text/css">
#pieChart {
position:absolute;
top:10px;
left:10px;
width:400px;
height: 400px;
}
#lineChart {
position:absolute;
top:10px;
left:410px;
height: 150px;
}
#barChart {
position:absolute;
top:160px;
left:410px;
height: 250px;
}
.slice {
font-size: 8pt;
font-family: Verdana;
fill: white; //svg specific - instead of color
font-weight: normal ;
}
/*for line chart*/
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges; //The shape-rendering property is an SVG attribute, used here to make sure our axis and its tick mark lines are pixel-perfect.
}
.line {
fill: none;
/*stroke: steelblue;*/
stroke-width: 3px;
}
.dot {
/*fill: white;*/
/*stroke: steelblue;*/
stroke-width: 1.5px;
}
.axis text {
font-family: Verdana;
font-size: 11px;
}
.title {
font-family: Verdana;
font-size: 15px;
}
.xAxis {
font-family: verdana;
font-size: 11px;
fill: black;
}
.yAxis {
font-family: verdana;
font-size: 11px;
fill: white;
}
table {
border-collapse:collapse;
border: 0px;
font-family: Verdana;
color: #5C5558;
font-size: 12px;
text-align: right;
}
td {
padding-left: 10px;
}
#lineChartTitle1 {
font-family: Verdana;
font-size : 14px;
fill : lightgrey;
font-weight: bold;
text-anchor: middle;
}
#lineChartTitle2 {
font-family: Verdana;
font-size : 72px;
fill : grey;
text-anchor: middle;
font-weight: bold;
/*font-style: italic;*/
}
</style>
</head>
<body>
var formatAsPercentage = d3.format("%"),
formatAsPercentage1Dec = d3.format(".1%"),
formatAsInteger = d3.format(","),
fsec = d3.time.format("%S s"),
fmin = d3.time.format("%M m"),
fhou = d3.time.format("%H h"),
fwee = d3.time.format("%a"),
fdat = d3.time.format("%d d"),
fmon = d3.time.format("%b")
;
function dsPieChart() {
var dataset = [
{category: "Tom", measure: 0.30},
{category: "John", measure: 0.30},
{category: "Martin", measure: 0.30},
{category: "Sam", measure: 0.30},
{category: "Peter", measure: 0.25},
{category: "Johannes", measure: 0.15},
{category: "Rick", measure: 0.05},
{category: "Lenny", measure: 0.18},
{category: "Paul", measure: 0.04},
{category: "Steve", measure: 0.03}
]
;
var width = 400,
height = 400,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .999,
// for animation
innerRadiusFinal = outerRadius * .5,
innerRadiusFinal3 = outerRadius * .45,
color = d3.scale.category20() //builtin range of colors
;
var vis = d3.select("#pieChart")
.append("svg:svg")
.data([dataset])
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
;
var arc = d3.svg.arc()
.outerRadius(outerRadius).innerRadius(innerRadius);
// for animation
var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
var pie = d3.layout.pie()
.value(function (d) {
return d.measure;
});
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", up)
;
arcs.append("svg:path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc)
.append("svg:title")
.text(function (d) {
return d.data.category + ": " + formatAsPercentage(d.data.measure);
});
d3.selectAll("g.slice").selectAll("path").transition()
.duration(750)
.delay(10)
.attr("d", arcFinal)
;
arcs.filter(function (d) {
return d.endAngle - d.startAngle > .2;
})
.append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", function (d) {
return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")";
})
.text(function (d) {
return d.data.category;
})
;
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
// Pie chart title
vis.append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text("Revenue Share 2012")
.attr("class", "title")
;
function mouseover() {
d3.select(this).select("path").transition()
.duration(750)
//.attr("stroke","red")
//.attr("stroke-width", 1.5)
.attr("d", arcFinal3)
;
}
function mouseout() {
d3.select(this).select("path").transition()
.duration(750)
//.attr("stroke","blue")
//.attr("stroke-width", 1.5)
.attr("d", arcFinal)
;
}
function up(d, i) {
updateBarChart(d.data.category, color(i));
updateLineChart(d.data.category, color(i));
}
}
dsPieChart();
</script>
</body>
测试饼图
#图{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：400px；
高度：400px；
}
#线形图{
位置：绝对位置；
顶部：10px；
左：410像素；
高度：150像素；
}
#柱状图{
位置：绝对位置；
顶部：160px；
左：410像素；
高度：250px；
}
.切片{
字号：8pt；
字体系列：Verdana；
填充：白色；//svg特定-而不是颜色
字体大小：正常；
}
/*用于折线图*/
.轴路径，.轴线{
填充：无；
笔画：黑色；
shape rendering:CrispEdge；//shape rendering属性是一个SVG属性，用于确保轴及其记号线是像素级的。
}
.线路{
填充：无；
/*笔画：钢蓝*/
笔画宽度：3px；
}
多特先生{
/*填充物：白色*/
/*笔画：钢蓝*/
笔划宽度：1.5px；
}
.轴文本{
字体系列：Verdana；
字体大小：11px；
}
.头衔{
字体系列：Verdana；
字体大小：15px；
}
xAxis先生{
字体系列：verdana；
字体大小：11px；
填充：黑色；
}
亚克斯先生{
字体系列：verdana；
字体大小：11px；
填充物：白色；
}
桌子{
边界塌陷：塌陷；
边界：0px；
字体系列：Verdana；
颜色：#5C5558；
字体大小：12px；
文本对齐：右对齐；
}
运输署{
左侧填充：10px；
}
#线形图标题1{
字体系列：Verdana；
字体大小：14px；
填充物：浅灰色；
字体大小：粗体；
文本锚定：中间；
}
#线形图标题2{
字体系列：Verdana；
字体大小：72px；
填充物：灰色；
文本锚定：中间；
字体大小：粗体；
/*字体：斜体*/
}
var formatAsPercentage=d3.format（“%”），
formatAsPercentage1Dec=d3.format（“.1%”），
formatAsInteger=d3.format（“，”），
fsec=d3.time.format（“%S”），
fmin=d3.time.format（“%M”），
fhou=d3.time.format（“%H”），
fwee=d3.time.format（“%a”），
fdat=d3.time.format（“%d”），
fmon=d3.time.format（“%b”）
;
函数dsPieChart（）{
变量数据集=[
{类别：“汤姆”，测量值：0.30}，
{类别：“约翰”，衡量标准：0.30}，
{类别：“马丁”，测量值：0.30}，
{类别：“Sam”，测量值：0.30}，
{类别：“彼得”，计量单位：0.25}，
{类别：“约翰”，计量：0.15}，
{类别：“瑞克”，测量值：0.05}，
{类别：“Lenny”，度量值：0.18}，
{类别：“保罗”，衡量标准：0.04}，
{类别：“史蒂夫”，测量值：0.03}
]
;
可变宽度=400，
高度=400，
外层=数学最小值（宽度、高度）/2，
内半径=外半径*.999，
//动画
内半径最终=外半径*.5，
内半径FINAL3=外半径*.45，
color=d3.scale.category20（）//内置颜色范围
;
var vis=d3。选择（“pieChart”）
.append（“svg:svg”）
.data（[数据集]）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.append（“svg:g”）
.attr（“转换”、“转换”（“+outerRadius+”，“+outerRadius+”））
;
var arc=d3.svg.arc（）
.outerRadius（outerRadius）。innerRadius（innerRadius）；
//动画
var arcfail=d3.svg.arc（）.innerRadius（innerRadiusFinal）.outerRadius（outerRadius）；
var arcFinal3=d3.svg.arc（）.innerRadius（innerRadiusFinal3）.outerRadius（outerRadius）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d.measure；
});
var arcs=vis.selectAll（“g.slice”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）
。打开（“单击”，向上）
;
arcs.append（“svg:path”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）
.append（“svg:title”）
.文本（功能（d）{
返回d.data.category+“：”+formatAsPercentage（d.data.measure）；
});
d3.selectAll（“g.slice”）.selectAll（“path”）.transition（）
.持续时间（750）
arcs.filter(function (d) {
return d.endAngle - d.startAngle > .2;
})
.append("svg:text")...
arcs.filter(function (d) {
return d.endAngle - d.startAngle > .2;
})