在 Rails 视图中设置 D3 图形的样式答案

【问题标题】：Styling D3 graphic in Rails view在 Rails 视图中设置 D3 图形的样式
【发布时间】：2013-07-11 22:09:26
【问题描述】：

我正在尝试在 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;
    }

我尝试更改颜色和其他属性无效。 CSS 设置似乎对 D3 呈现图形的方式没有任何影响。这是 Rails/asset 管道问题、javascript 问题，还是 D3 如何渲染 SVG 的一些特殊问题？

感谢您提供的任何见解！

【问题讨论】：

如果你的 js 在资产管道上失败了，那么你的 CSS 很可能也失败了。为了验证这一点，将 mindmap.css 的内容放入你的主应用 css 中，它可能会渲染得很好。
哇——好用！好决定！如果您在下面添加您的回复，我会选择它作为正确答案。谢谢！

标签： ruby-on-rails svg d3.js

【解决方案1】：

如果您的 JavaScript 在资产管道上失败了，那么您的 CSS 很可能也失败了。要验证这一点，请将 mindmap.css 的内容放入您的主应用 css 中，它会正常渲染。

资产管道不包含您的文件的原因可能是由于配置或与您的代码无关的其他原因。

【讨论】：