2

我正在寻找一种用我的 MVC 应用程序中的数据提供d3.js 气泡图的好方法。例如,标准气泡图需要以下形式的嵌套数据:

{
    "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. 服务器端,使用匿名类型
  2. 服务器端,调整 linq-query
  3. 客户端,使用d3.js 嵌套
  4. 使用更简单的气泡模型,因为出于我的目的,实际上并不需要带有孩子的嵌套结构
  5. 完全不同的东西,比 1-4 酷得多

感谢您的任何意见。

4

1 回答 1

3

将您的退货声明替换为以下内容。

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
        }
      ]
    }
  ]
}
于 2013-10-29T20:09:23.047 回答