title: Styling D3 graphic in Rails view
body: <p>I am trying to render the following D3 graph in a rails view:</p>
  
  <p><a href="https://gist.github.com/mbostock/4063570" rel="nofollow">https://gist.github.com/mbostock/4063570</a></p>
  
  <p>It shows up OK, except it's completely black and the lines don't show up well either (screenshot permalink):
  <a href="https://www.evernote.com/shard/s116/sh/5d2b40c6-2bd0-49a7-8ead-c29713cc5ed7/2ca5e19814e84f05d5709232b3edec6f/deep/0/Screenshot%207/5/13%207:07%20PM.png" rel="nofollow">https://www.evernote.com/shard/s116/sh/5d2b40c6-2bd0-49a7-8ead-c29713cc5ed7/2ca5e19814e84f05d5709232b3edec6f/deep/0/Screenshot%207/5/13%207:07%20PM.png</a></p>
  
  <p>Here's the code in my view (I was having trouble getting it to render at all when the js was in the assets pipeline):</p>
  
  <p>/app/views/steps/mindmap.html.erb</p>
  
  <pre><code>    &lt;%= javascript_tag do %&gt;
          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");
      &lt;% end %&gt;
  </code></pre>
  
  <p>and app/assets/mindmap.css:</p>
  
  <pre><code>    .node circle {
        fill: #7A8B8B;
        stroke: #7A8B8B;
        stroke-width: 1.5px;
      }
  
      .node {
        font: 10px sans-serif;
      }
  
      .link {
        fill: #7A8B8B;
        stroke: #7A8B8B;
        stroke-width: 1.5px;
      }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks for any insights you may have!</p>