Javascript 使用json数组的圆环图

Javascript 使用json数组的圆环图,javascript,d3.js,donut-chart,Javascript,D3.js,Donut Chart,我正在学习d3,并试图在我的应用程序中使用d3库来显示一些可视化图表。我在这里以json的形式通过web api获取数据 我的脚本: var data= "rows":[ { "STATUS" : "Active", "count" : "246" }, { "STATUS" : "Not Proceeded With", "count" : "40" } ] var width = 800

我正在学习d3,并试图在我的应用程序中使用d3库来显示一些可视化图表。我在这里以json的形式通过web api获取数据

我的脚本:

var data=  "rows":[
    {
        "STATUS" : "Active",
        "count" : "246"  
    },
    {
        "STATUS" : "Not Proceeded With",
        "count" : "40" 
    }
]

var width = 800,
    height = 250,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

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

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

var g = svg.selectAll(".arc")
    .data(pie(data.rows))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        return color(d.data.rows.STATUS);
    });

g.append("text")
    .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {
        return d.data.rows.STATUS;
    });
现在,我想使用该数据集创建甜甜圈图表。我已经尝试过了,但没有成功。有谁能给我一些建议,告诉我如何解决以下几个问题:

1.)您的JSON无效:

var data = { //<- missing bracket
  "rows": [
    {
      "STATUS": "Active",
      "count": "246"
    }, {
      "STATUS": "Not Proceeded With",

      "count": "40"
    }
  ]
} //<- missing bracket

向我们展示您尝试过的javascript代码。我已经提到了上面的脚本。您能告诉我哪里出了错吗?很抱歉,没有主题,但您尝试过C3.js吗?这是一张基于D3的图表。非常感谢()不,我没听说过C3.Js…?你能在d3中帮助我吗..事实上我知道我犯了一个很小的错误..嗨,马克..非常感谢马克对我的适当帮助我真的很感激..)
return color(d.data.STATUS); //<-- don't need "rows", you only passed in data.rows