17

我正在尝试从我的 Rails 应用程序中呈现以下树状图：http: //bl.ocks.org/mbostock/4063570

我有一个具有许多属性的模型，但我想手动嵌套这些属性并简单地使用字符串插值来构建我自己的 JSON 字符串，然后直接将其传递给 d3。

这是我的代码：

    <%= javascript_tag do %>
        var width = 960,
        height = 2200;

        var cluster = d3.layout.cluster()
        .size([height, width - 160]);

        var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(40,0)");

        **d3.json("/assets/flare.json", function(root) {**
        var nodes = cluster.nodes(root),
        links = cluster.links(nodes);

        var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

        var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

        node.append("circle")
        .attr("r", 4.5);

        node.append("text")
        .attr("dx", function(d) { return d.children ? -8 : 8; })
        .attr("dy", 3)
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .text(function(d) { return d.name; });
        });

        d3.select(self.frameElement).style("height", height + "px");
    <% end %>

这是我的（未缩小的）JSON 字符串：

var mystring = '{
    "name": "Product",
    "properties": {
        "id": {
            "type": "number",
            "description": "Product identifier",
            "required": true
        },
        "name": {
            "type": "string",
            "description": "Name of the product",
            "required": true
        },
        "price": {
            "type": "number",
            "minimum": 0,
            "required": true
        },
        "tags": {
            "type": "array",
            "items": {
                "type": "string"
            }
        },
        "stock": {
            "type": "object",
            "properties": {
                "warehouse": {
                    "type": "number"
                },
                "retail": {
                    "type": "number"
                }
            }
        }
    }
}';

我尝试过的事情：

  1. 缩小 JSON，使其仅作为一行输入（无效）

  2. 在字符串上运行 JSON.parse(mystring)

  3. 查看 D3 文档并在谷歌上搜索修改以下函数以接受字符串而不是文件路径的方法：

    d3.json("/assets/flare.json", function(root) {
        var nodes = cluster.nodes(root),
        links = cluster.links(nodes);
4

2 回答 2

38

首先，让我们看看有什么d3.json作用。

d3.json("/assets/flare.json", function(root) {
    // code that uses the object 'root'
});

这会从服务器加载文件/assets/flare.json，将内容解释为 JSON，并将结果对象作为root参数传递给匿名函数。

如果您已经有 JSON 对象，则不需要使用该d3.json函数 - 您可以直接使用该对象。

var root = {
   "name": "flare",
   "children": [
     ...
   ]
};
// code that uses the object 'root'

如果对象表示为字符串，那么您可以使用JSON.parse来获取对象：

var myString = '{"name": "flare","children": [ ... ] }';
var root = JSON.parse(mystring);
// code that uses the object 'root'

其次，让我们看看d3.layout.cluster对您的数据有什么期望。根据文档：

...默认的子访问器假定每个输入数据都是具有子数组的对象...

换句话说，您的数据需要采用以下形式：

var mystring = '{
    "name": "Product",
    "children": [
        {
            "name": "id",
            "type": "number",
            "description": "Product identifier",
            "required": true
        },
        ...
        {
            "name": "stock",
            "type": "object",
            "children": [
                {
                    "name: "warehouse",
                    "type": "number"
                },
                {
                    "name": "retail",
                    "type": "number"
                }
            ]
        }
    ]
}
于 2013-07-14T19:41:04.570 回答
1

d3.json 实际上将 URL 作为参数，因此我建议将数据管理委托给控制器（特别是，如果将来您需要从数据库加载它），而不是给它文件的路径，以便简化事物：

  1. 在您的控制器中创建一个方法，该方法实际上会打开文件并返回其内容：
class YourFlareController < ApplicationController
    def load
        @data = File.read("app/assets/json/flare.json")
        render :json => @data
    end
end
  1. 确保您的 routes.rb 中有一条路线

得到“你的耀斑/负载”

  1. 现在在你的javascript中你可以简单地调用

d3.json("http://host/yourflare/load", function(root) {

于 2014-02-09T23:56:24.327 回答