Question

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

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

它显示OK，除了它完全是黑色并且线条也不能很好地显示（截图永久链接）： 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 /资产管道问题，一个javascript问题，或者可能是关于D3如何渲染SVG的特别之处？

感谢您的任何见解！

Answer 1

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

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

在Rails视图中设置D3图形样式

1 个答案: