1

我正在用 D3 绘制饼图。从数据库中获取数据。下面给出了示例 JSON。我的图表应该有 SLA 合规性作为图例，饼图应该使用 SLA 合规性的值（这里是 100）绘制，每个月。传奇即将到来。在这里，“SLA 合规性”是一个标签，当单击其他单选按钮/下拉菜单时，该标签会随着不同的图表而变化。在控制台中打印值时，我发现调用 Var pie 时，其中的值是未定义的。图表未显示。有人可以帮我吗。

示例 JSON：

[
 {month:"Nov-11", 'SLA Compliance':100},{month:"Dec-11", 'SLA Compliance':100}, 
 {month:"Jan-12", 'SLA Compliance':100}, {month:"Feb-12", 'SLA Compliance':100}, 
 {month:"Mar-12", 'SLA Compliance':100}, {month:"Apr-12", 'SLA Compliance':100
]

代码：

function drawPieChart3(xData,data,svg,index,selectedIndex){
    var width = 400, 
        height = 100,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

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

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

    var temp= d3.keys(data[0]).filter(function(key) { return key !== "month"; })
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "month"; })); 

    data.forEach(function(d) {
        d.month=d.month
        d.pieValue = temp.map(function(name) {  
            return {name: name, value: +d[name]}; });


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

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

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


    //legend portion 
    alert("11. in legend portion")
    var mylegend = svg.selectAll(".mylegend")
        .data(temp)
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + (legentCount+i+1) * 20 + ")"; });

   mylegend.append("rect")
        .attr("x", width+40)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

   mylegend.append("text")
        .attr("x", width+60)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "start")
        .text(function(d) { return d; });


  }
4

0 回答 0