c# - Linq 查询到 d3.js 图表

Question

我正在寻找一种喂食 d3.js bubble chart 的好方法使用来 self 的 MVC 应用程序的数据。例如，标准气泡图需要以下形式的嵌套数据:

{
    "name": "flare",
    "children": [
        {
            "name": "analytics",
            "children": [
                {
                    "name": "cluster",
                    "children": [
                        {
                            "name": "CNN",
                            "size": 3938
                        }
                    ]
                },
                {
                    "name": "graph",
                    "children": [
                        {
                            "name": "MTV",
                            "size": 3534
                        }
                    ]
                }
            ]
        }
    ]
}

我在服务器端拥有的是对 SQL 数据库的 linq 查询:

var results = from a in db.Durations
                          where a.Category == "watch"
                          group a by a.Description
                              into g
                              select new
                              {
                                  name = g.Key,
                                  size = g.Select(d => new{d.Begin, d.End}).Sum(d => SqlFunctions.DateDiff("hh", d.Begin, d.End))
                              };

            return Json(results, JsonRequestBehavior.AllowGet);

解析为 Json 的查询结果如下所示:

[{"name":"CNN","size":1950},{"name":"MTV","size":1680}]

我一直在思考什么是实现正确格式设置和从我的查询结果创建嵌套结构的好方法。

1. 服务器端，使用anonymous types
2. 服务器端，调整linq查询
3. 客户端，使用d3.js nest
4. 使用更简单的气泡模型，因为对于我来说，嵌套的确实不需要有 child 的结构
5. 完全不同的东西，比 1-4 酷得多

感谢您的任何输入。

Answer 1

将您的返回声明替换为以下内容。

return Json(new
    {
        name = "Sites",
        children = results
    },
    JsonRequestBehavior.AllowGet);

这将为您提供以下内容:

{
  "name": "Sites",
  "children": [
    {
      "name": "CNN",
      "size": 1950
    },
    {
      "name": "MTV",
      "size": 1680
    }
  ]
}

举个例子，假设每个网站都有一个额外的 string Type 属性，其值例如 "News" 或 "Music"。然后您可以执行以下操作。

return Json(new
    {
        name = "Sites",
        children = results.GroupBy(site => site.Type).Select(group => new
        {
            name = group.Key,
            children = group
        }
    },
    JsonRequestBehavior.AllowGet);

这会给你类似下面的东西。

{
  "name": "Sites",
  "children": [
    {
      "name": "News",
      "children": [
        {
          "name": "CNN",
          "size": 1950
        },
        {
          "name": "The Verge",
          "size": 1600
        }
      ]
    },
    {
      "name": "Music",
      "children": [
        {
          "name": "MTV",
          "size": 1680
        },
        {
          "name": "Pandora",
          "size": 2000
        }
      ]
    }
  ]
}