D3.js饼图无报错却不显示问题排查（C# MVC4后端）

我帮你梳理下这个饼图不显示的问题，结合你的代码和数据，大概率是这几个地方出了问题，咱们一步步来修复：

1. 核心问题：数据的value是字符串类型 #

你提供的JSON数据里，value字段都是字符串格式（比如"35470"），但d3pie需要数值类型来计算饼图的弧度占比。字符串无法参与数值计算，这会导致饼图无法正常渲染——虽然控制台不会报错，SVG元素也会被追加，但看不到实际的饼块。

修复方法：转换value为数值类型 #

在解析完JSON后，遍历数据把value转成整数或浮点数：

// 解析原始数据
var rawData = JSON.parse(@Html.Raw(Json.Encode(ViewBag.monthTrip)));
// 处理数据，将value转换为数值类型
var processedData = rawData.map(item => {
  return {
    label: item.label,
    value: parseInt(item.value, 10), // 用parseInt确保转为整数，也可以用Number()
    color: item.color
  };
});

然后在d3pie配置的data.content中使用处理后的processedData。

2. 确认ViewData与ViewBag的一致性 #

你提到后端是将数据存入ViewData["monthTrip"]，但前端代码用的是ViewBag.monthTrip。虽然MVC中ViewData和ViewBag本质是互通的，但为了避免意外，建议保持前后端的键名一致：

• 要么后端改为ViewBag.monthTrip = ...
• 要么前端改为JSON.parse(@Html.Raw(Json.Encode(ViewData["monthTrip"])))

3. 检查容器元素与库的引入 #

• 确保页面上存在id为tripMonthsChart的容器元素，比如：

  <div id="tripMonthsChart"></div>
  

• 确认已正确引入d3pie依赖的库：d3pie基于D3 v3开发，需要先引入D3 v3，再引入d3pie（如果还没引入的话）：

  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie.min.js"></script>
  

修复后的完整代码示例 #

<div id="tripMonthsChart"></div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie.min.js"></script>
<script>
$(document).ready(function(){
  // 解析并处理数据
  var rawData = JSON.parse(@Html.Raw(Json.Encode(ViewBag.monthTrip)));
  var processedData = rawData.map(item => {
    return {
      label: item.label,
      value: parseInt(item.value, 10),
      color: item.color
    };
  });

  var pie = new d3pie("tripMonthsChart", {
    "size": {
      "canvasHeight": 270,
      "canvasWidth": 320,
      "pieInnerRadius": "45%",
      "pieOuterRadius": "65%"
    },
    "data": {
      "sortOrder": "value-desc",
      "content": processedData
    },
    "labels": {
      "inner": {
        "format": "value"
      },
      "mainLabel": {
        "fontSize": 16
      },
      "percentage": {
        "color": "#ffffff",
        "decimalPlaces": 0
      },
      "value": {
        "color": "#000000",
        "fontSize": 18
      },
      "lines": {
        "enabled": true,
        "style": "straight"
      },
      "truncation": {
        "enabled": true
      }
    },
    "tooltips": {
      "enabled": true,
      "type": "placeholder",
      "string": "{label}: {value} ({percentage}%)",
      "styles": {
        "fontSize": 18
      }
    },
    "effects": {
      "pullOutSegmentOnClick": {
        "speed": 400,
        "size": 8
      }
    }
  });
});
</script>

按照上面的步骤调整后，饼图应该就能正常显示了。

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