通过d3.json提供值时,不会呈现饼图

时间:2017-08-04 22:41:07

标签: json d3.js pie-chart

我正在尝试读取JSON中指定的值,并基于在d3.json中创建Piechart的那些值。但是在手动提供值时,饼图功能齐全! JSON文件与.html文件位于同一目录中。此外, var数据集正在填充所需的值,这可通过在控制台中记录数据集来验证。我在Chrome浏览器中没有收到任何错误。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Sentiments Score</title>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

    <div id="chart"></div>

    <script type="text/javascript">

    var dataset = [
      { "label": 'Neutral'},
      { "label": 'Positive'},
      { "label": 'Negative' }
        ];

    d3.json("senti_analysis.json", function(data){
        for (var i =0; i<dataset.length;i++)
        {
            if (dataset[i].label == 'Neutral')
            {
                dataset[i].count = +data.key.senti.neu;
            }
            else if (dataset[i].label == 'Positive') {
                dataset[i].count = +data.key.senti.pos;
            }
            else
            {
                dataset[i].count = +data.key.senti.neg;
            }
        }
    });
    /*
    var dataset = [{ label: 'Neutral', count: 0.45 },
      { label: 'Positive', count: 0.45 },
      { label: 'Negative', count: 0.10 }
  ];*/
  console.log(dataset);
    var w = 360;
    var h = 360;
    var r = Math.min(w, h) / 2;
    var color = d3.scaleOrdinal(d3.schemeCategory20b);

    var svg = d3.select('#chart')
      .append('svg')
      .attr('width', w)
      .attr('height', h)
      .append('g')
      .attr('transform', 'translate(' + (w / 2) +  ',' + (h / 2) + ')');

    var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(r);

    var pie = d3.pie()
    .value(function(d) { return d.count; })
    .sort(null);

    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return color(d.data.label);
      });

    </script>
</body>

我想读的json文件如下:

{
"key": {
    "senti": {
        "neg": 0.10,
        "neu": 0.45,
        "pos": 0.45,
        "compound": 0.784
    },
    "post": "I am excited to do Sentiment Analysis. I live in Tempe 
    and I love learning!"
  }
 }

0 个答案:

没有答案