диаграмма пончика с использованием json-массива

Question

Я изучаю 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; 
    }); 

Теперь я хочу использовать этот набор данных для создания пончики chart.i попытались, но не получают какой-либо один success.can плз предложить мне какие-либо идеи, как я могу сделать

Answer 1

проблемы Пара:

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>