Question

所以我对D3.js很新，所以我正在寻找一些帮助。我想仅使用JSON响应的第一部分制作饼图。例如，以下是JSON的样子：

[
    {
        "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
    }
]

所以这里发生的是RTT是总数（整个馅饼）然后接收，服务器忙，发送，SSL，连接和DNS是构成整体的部分（所有这些都加起来等于RTT）。我在网上发现的所有例子都不是这样做的，所以我想知道这是否可能，如果是的话，我怎么能这样做？

我已经设置了基础（它只使用了所有3个RTT＆＃39;）但我不确定如何以我想要的方式使用数据。任何帮助表示赞赏。谢谢！

<!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饼图只包含一部分JSON数据

0 个答案: