D3.js如何将ASP.NET后端返回的数据库真实数据加载到饼图中

1. 异步加载问题修复 #

你之前直接赋值var mydata=d3.json("mydatafile")无法拿到实际数据，是因为d3.json是异步请求方法，执行打印操作时请求还未返回结果，所以只会显示Promise对象。你使用的D3 v3版本需通过回调函数获取响应数据。

2. 数据格式适配 #

你的ASP.NET接口返回的是所有项目的审批状态明细，需要先聚合统计Yes/No/N/A三类状态的数量，再转换为饼图需要的百分比结构。

3. 调整后完整代码 #

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="graph1"></div>
<script>
var aColor = [
    'rgb(127, 212, 123)', //green 对应Yes
    'rgb(240, 149, 164)', // red 对应No
    'rgb(181, 174, 175)' //gray 对应N/A
]
var svgWidth = 200,
    svgHeight = 200,
    radius = Math.min(svgWidth, svgHeight) / 2;
var svg = d3.select('#graph1').append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);
var g = svg.append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");
var pie = d3.layout.pie().value(function (d) {
    return d.percentage;
});
var path = d3.svg.arc()
    .outerRadius(80)
    .innerRadius(40);
var label = d3.svg.arc()
    .outerRadius(20)
    .innerRadius(100);
// 替换为你的实际接口路径，如/Home/BarChart
d3.json("/你的Controller名称/BarChart", function(error, rawData) {
    if (error) throw error;
    // 统计三类状态的数量
    let yesCount = 0, noCount = 0, naCount = 0;
    rawData.forEach(item => {
        switch(item.Name) {
            case "Yes": yesCount++; break;
            case "No": noCount++; break;
            case "N/A": naCount++; break;
        }
    });
    const total = yesCount + noCount + naCount;
    // 生成饼图所需的格式数据
    const data = total > 0 ? [
        {"platform": "Yes", "percentage": (yesCount/total*100).toFixed(2)},
        {"platform": "No", "percentage": (noCount/total*100).toFixed(2)},
        {"platform": "N/A", "percentage": (naCount/total*100).toFixed(2)}
    ] : [];
    // 渲染逻辑
    var arc = g.selectAll("arc")
        .data(pie(data))
        .enter()
        .append("g")
        .sort((a, b) => b.data.percentage - a.data.percentage);
    arc.append("path")
        .attr("d", path)
        .attr("fill", function (d, i) { return aColor[i]; });
    arc.append("text")
        .attr("transform", function (d) {
            return "translate(" + label.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
            return +d.data.percentage + "%";
        });
});
</script>

4. 注意事项 #

• 代码中的接口路径请替换为你实际的ASP.NET路由地址，接口所在的Controller名、Action名要和后端定义一致
• 如果前端和后端站点端口、域名不一致，需要在ASP.NET后端配置CORS跨域权限，否则会请求失败
• 代码中做了空数据兼容，当没有查询到数据时不会渲染图表避免报错

内容的提问来源于stack exchange，提问作者user10981554