0

我正在尝试在 rails 视图中呈现以下 D3 图：

https://gist.github.com/mbostock/4063570

它显示正常，除了它完全是黑色的而且线条也没有很好地显示（截图永久链接）： https ://www.evernote.com/shard/s116/sh/5d2b40c6-2bd0-49a7-8ead-c29713cc5ed7/ 2ca5e19814e84f05d5709232b3edec6f/deep/0/Screenshot%207/5/13%207:07%20PM.png

这是我认为的代码（当 js 在资产管道中时，我根本无法渲染它）：

/app/views/steps/mindmap.html.erb

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

和 app/assets/mindmap.css：

    .node circle {
      fill: #7A8B8B;
      stroke: #7A8B8B;
      stroke-width: 1.5px;
    }

    .node {
      font: 10px sans-serif;
    }

    .link {
      fill: #7A8B8B;
      stroke: #7A8B8B;
      stroke-width: 1.5px;
    }

I've tried changing the color and other attributes to no effect. The CSS settings don't seem to have any impact on the way D3 renders the graphic. Is this a Rails/asset pipeline problem, a javascript problem, or perhaps something special about how D3 renders SVGs?

Thanks for any insights you may have!

4

1 回答 1

0

If your JavaScript was failing with the assets pipeline then it's likely that your CSS is failing too. To verify this, put the contents of mindmap.css into your main app css and it wil render fine.

The reason why the assets pipeline is not including your files might be due to configuration or some other reason unrelated to your code.

于 2013-07-11T14:09:26.930 回答