Javascript 只有一部分JSON数据的D3饼图
所以我对D3.js很陌生，所以我想寻求一些帮助。我想用JSON响应的第一部分制作一个饼图。例如，以下是JSON的外观：Javascript 只有一部分JSON数据的D3饼图,javascript,json,d3.js,charts,pie-chart,Javascript,Json,D3.js,Charts,Pie Chart,所以我对D3.js很陌生，所以我想寻求一些帮助。我想用JSON响应的第一部分制作一个饼图。例如，以下是JSON的外观： [ { "Count": 4224, "DNS": 0, "Connect": 181, "SSL": 218, "Send": 65.7, "Server Busy": 1459, "Receive": 3, "RTT": 1926.7
[
{
"Count": 4224,
"DNS": 0,
"Connect": 181,
"SSL": 218,
"Send": 65.7,
"Server Busy": 1459,
"Receive": 3,
"RTT": 1926.7
},
{
"Count": 5268,
"DNS": 0,
"Connect": 153.3,
"SSL": 218,
"Send": 54,
"Server Busy": 2211,
"Receive": 1,
"RTT": 2637.3
},
{
"Count": 5567,
"DNS": 0,
"Connect": 103,
"SSL": 190,
"Send": 53,
"Server Busy": 2100,
"Receive": 2,
"RTT": 2448
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphic</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
background: #FDF6E3;
color: #475B62;
}
strong {
font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
font-weight: 700;
color: #CB4B19;
font-size: 1.75em;
margin-bottom: .4em;
}
p {
margin-bottom: .5em;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
margin-top:10px;
}
@media all and (max-width: 500px) {
h2 {
padding-left: 10px;
text-align: center;
}
.container {
width: 100%;
}
}
#graphic {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>D3 Graphic</h2>
<div id="chart"></div>
</div>
<script>
var width = 400,
height = 400,
radius = 200
colors = d3.scale.ordinal()
.range(['#33CCCC','#6600CC','#0066FF']);
var piedata = [
{
"Count": 4224,
"DNS": 0,
"Connect": 181,
"SSL": 218,
"Send": 65.7,
"Server Busy": 1459,
"Receive": 3,
"RTT": 1926.7
},
{
"Count": 5268,
"DNS": 0,
"Connect": 153.3,
"SSL": 218,
"Send": 54,
"Server Busy": 2211,
"Receive": 1,
"RTT": 2637.3
},
{
"Count": 5567,
"DNS": 0,
"Connect": 103,
"SSL": 190,
"Send": 53,
"Server Busy": 2100,
"Receive": 2,
"RTT": 2448
}
]
var pie = d3.layout.pie()
.value(function(d) {
return d.RTT;
})
var arc = d3.svg.arc()
.outerRadius(radius)
var myChart = d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate('+(width-radius)+','+(height-radius)+')')
.selectAll('path').data(pie(piedata))
.enter().append('g')
.attr('class', 'slice')
var slices = d3.selectAll('g.slice')
.append('path')
.attr('fill', function(d, i) {
return colors(i);
})
.attr('d', arc)
var text = d3.selectAll('g.slice')
.append('text')
.text(function(d, i) {
return d.data.RTT;
})
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.attr('transform', function(d) {
d.innerRadius = 0;
d.outerRadius = radius;
return 'translate('+ arc.centroid(d)+')'
})
</script>
</body>
</html>
D3图形
身体{
字体系列：“Exo 2”，“Helvetica Neue”，Helvetica，无衬线；
字体大小：300；
字体大小：1.2米；
线高：1.2米；
背景：#FDF6E3；
颜色：#475B62；
}
强壮的{
字号：600；
}
h1、h2、h3、h4、h5、h6{
字体系列：“Roboto Slab”，“Helvetica Neue”，Helvetica，无衬线；
字号：700；
颜色：#CB4B19；
字号：1.75em；
边缘底部：.4em；
}
p{
边缘底部：.5em；
}
.集装箱{
宽度：80%；
最大宽度：1200px；
保证金：0自动；
边缘顶部：10px；
}
@全部和全部介质（最大宽度：500px）{
氢{
左侧填充：10px；
文本对齐：居中；
}
.集装箱{
宽度：100%；
}
}
#图形{
保证金：0自动；
}
D3图形
可变宽度=400，
高度=400，
半径=200
颜色=d3.scale.ordinal（）
.范围（['33CCCC'、'6600CC'、'0066FF']）；
变量数据=[
{
“计数”：4224，
“DNS”：0，
“连接”：181，
“SSL”：218，
“发送”：65.7，
“服务器忙”：1459，
“接收”：3，
“RTT”：1926.7
},
{
“计数”：5268，
“DNS”：0，
“连接”：153.3，
“SSL”：218，
“发送”：54，
“服务器忙”：2211，
“接收”：1，
“RTT”：2637.3
},
{
“计数”：5567，
“DNS”：0，
“连接”：103，
“SSL”：190，
“发送”：53，
“服务器忙”：2100，
“接收”：2，
“RTT”：2448
}
]
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d.RTT；
})
var arc=d3.svg.arc（）
.外部（半径）
var myChart=d3.select（“#chart”）.append（'svg'））
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（+（宽度-半径）+'，'+（高度-半径）+'））
.selectAll（'path'）.data（饼图（饼图数据））
.enter（）.append（'g'）
.attr（'class'，'slice'）
var slice=d3.selectAll（'g.slice'）
.append（'路径'）
.attr（'fill'，函数（d，i）{
返回颜色（i）；
})
.attr（'d'，弧）
var text=d3.selectAll（'g.slice'）
.append（'文本'）
.文本（功能（d，i）{
返回d.data.RTT；
})
.attr（'text-anchor'，'middle'）
.attr（'填充'，'白色'）
.attr（'transform'，函数（d）{
d、 内半径=0；
d、 外层=半径；
返回“平移（'+弧形心（d）+'）”
})