如何在Rails应用程序中显示d3.js圆包图？ [英] How to show d3.js circle pack graph in a Rails application?

问题描述

我一直在努力做到这一点： http：//bl.ocks。 org / mbostock / 4063269＃flare.json 示例在我的示例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直径）
 .attr（class，bubble）; 
 
 d3.json（assets / data / flare.json，function（error，root）{
 var node = svg.selectAll（。node）
。 
 .filter（function（d）{return！d.children;}）
 .enter（）。append（g）
 .attr（class，node）
 .attr（transform，function（d）{returntranslate（+ dx +，+ dy +）;}）; 
 
 node.append（title）
 .text（function（d）{return d.className +：+ format（d.value）;}）; 
 
 node.append（circle）
 .attr（r，function（d）{return dr;}）
 .style（fill，function（d）{return color（d.packageName）;}）; 
 
 node.append（text）
 .attr（dy，.3em）
 .style文本锚点，中间）
 .text（function（d）{return d.className.substring（0，dr / 3）;}）; 
}）; 
 
 //返回包含根下所有叶节点的扁平层次结构。 
 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> 
  

我把flare.json文件放在我的app / assets / data目录下。但是，似乎javascript不能从该位置加载flare.json文件。我只是不知道如何使这个工作:(如何指定json文件的位置，以便javascript可以加载它和代码工作吗？任何建议将是非常有用的。

$ b $。我们不能通过d3.json加载json文件，而是在javascript文件中渲染它的内容，并使用一个变量来存储它。

  var root =<％= render partial：'controller_view / flare.json'，formats：[：json]％> ;; 
  

I have been trying for long to make this : http://bl.ocks.org/mbostock/4063269#flare.json example work in my sample Rails app to learn about d3.js. But, I am getting hard time to make it work.

I put the following code in my index.html.erb file :

<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>

I put the flare.json file inside my app/assets/data directory. But, it seems like the javascript can not load the flare.json file from that location. I am just not sure how to make this work :( How to specify the location of the json file so that the javascript can load it and the code works? Any suggestion would be much much helpful.

解决方案

Instead of loading the json file via d3.json, I rendered its contents on the javascript file and used a variable to store it.

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

这篇关于如何在Rails应用程序中显示d3.js圆包图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！