Javascript 如何在Rails应用程序中显示d3.js循环包图？

我一直在努力让这个示例在我的示例Rails应用程序中运行，以了解d3.js。但是，我很难让它发挥作用

我将以下代码放在index.html.erb文件中：

<script type="text/javascript">

    var diameter = 960,
            format = d3.format(",d"),
            color = d3.scale.category20c();

    var bubble = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(1.5);

    var svg = d3.select("body").append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .attr("class", "bubble");

    d3.json("assets/data/flare.json", function(error, root) {
        var node = svg.selectAll(".node")
                .data(bubble.nodes(classes(root))
                .filter(function(d) { return !d.children; }))
                .enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        node.append("title")
                .text(function(d) { return d.className + ": " + format(d.value); });

        node.append("circle")
                .attr("r", function(d) { return d.r; })
                .style("fill", function(d) { return color(d.packageName); });

        node.append("text")
                .attr("dy", ".3em")
                .style("text-anchor", "middle")
                .text(function(d) { return d.className.substring(0, d.r / 3); });
    });

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
        var classes = [];

        function recurse(name, node) {
            if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
            else classes.push({packageName: name, className: node.name, value: node.size});
        }

        recurse(null, root);
        return {children: classes};
    }

    d3.select(self.frameElement).style("height", diameter + "px");

</script>

变量直径=960，
格式=d3。格式（“，d”），
颜色=d3.scale.category20c（）；
var bubble=d3.layout.pack（）
.sort（空）
.尺寸（[直径，直径]）
.填充（1.5）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.attr（“类”、“气泡”）；
d3.json（“assets/data/flare.json”，函数（错误，根）{
var node=svg.selectAll（“.node”）
.data（bubble.nodes（类（根））
.filter（函数（d）{return！d.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
node.append（“标题”）
.text（函数（d）{返回d.className+“：“+格式（d.value）；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.style（“fill”，函数（d）{返回颜色（d.packageName）；}）；
node.append（“文本”）
.attr（“dy”，“.3em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{返回d.className.substring（0，d.r/3）；}）；
});
//返回包含根下所有叶节点的展开层次结构。
函数类（根）{
var类=[]；
函数递归（名称、节点）{
if（node.children）node.children.forEach（function（child）{recurse（node.name，child）；}）；
push（{packageName:name，className:node.name，value:node.size}）；
}
递归（null，root）；
返回{子类：类}；
}
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；

---

我将flare.json文件放在app/assets/data目录中。但是，javascript似乎无法从该位置加载flare.json文件。我只是不知道如何做到这一点：（如何指定json文件的位置，以便javascript可以加载它，代码也可以工作？任何建议都会非常有用。

我没有通过d3.json加载json文件，而是将其内容呈现在javascript文件上，并使用一个变量来存储它

var root = <%= render partial: 'controller_view/flare.json', formats: [:json] %>;

var root=；

您在

d3.json

的第一个参数中指定json文件的位置。如果您在那里给出一个相对路径，它将与HTML文件所在的位置相对。这就是我一直在做的事情，指定flare.json文件的位置，该文件位于我的app/assets/data/flare.json中，但它不使用此路径。您能解释一下吗请在这一行详细说明“如果您在那里给出一个相对路径，它将与HTML文件所在的位置相对。”？您能给出一个指定json文件路径的例子吗？或者这个json文件应该放在什么地方？任何帮助都将不胜感激。@Larskotthoffy您可以在

http://host.com/foo/index.html

。您在

index.html

中给出的路径是相对于

foo/

目录，即如果您提供

assets/bar.json

，则完整的URL将是

http://host.com/foo/assets/bar.json

。您是否尝试过指定绝对URL并手动检查JSON文件是否在其应该的位置？我尝试了绝对路径和相对路径。没有任何效果。刚才，我尝试将flare.json文件在/public directotry.中，在我的d3.json调用中：d3.json（“/public/flare.json”），function（error，root）{..}即使这不起作用：（在我的js控制台中，我得到错误：get 404（not Found）你能指出我这里遗漏了什么吗？@LarsKotthoffWell，文件不在那里。这听起来像是rails配置问题，而不是d3问题。恐怕帮不了你。