-1

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

我的脚本：

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;
    });

现在我想使用该数据集来创建甜甜圈图。我尝试过但没有成功。任何人都可以建议我知道我该怎么做

4

1 回答 1

2

几个问题：

1.) 您的 JSON 无效：

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

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

2.）您没有正确访问填充和文本标签的 STATUS 属性：

return color(d.data.STATUS); //<-- don't need "rows", you only passed in data.rows

这是很好的工作：

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("body").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.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.STATUS;
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

于 2015-07-01T17:28:41.310 回答