Linq 查询到 d3.js 图表答案

【问题标题】：Linq query to d3.js chartLinq 查询到 d3.js 图表
【发布时间】：2013-11-09 03:31:33
【问题描述】：

我正在寻找一种向d3.js bubble chart 提供来自我的 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}]

我一直不知道什么是实现正确格式并从我的查询结果创建嵌套结构的好方法..

服务器端，使用anonymous types
服务器端，调整linq-query
客户端，使用d3.js nest
使用更简单的气泡模型，因为出于我的目的，嵌套真的不需要带孩子的结构
完全不同的东西，比 1-4 酷得多

感谢您的任何意见。

【问题讨论】：

标签： c# javascript json linq d3.js

【解决方案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
        }
      ]
    }
  ]
}

【讨论】：