CODEWITHSUNDEEP
javascriptsvgd3.jsforce-layout
lucifer
lucifer

Reputation: 2327

How to add custom colors in D3 nodes of a graph

enter image description here

I am using D3 api for a graph where a couple of nodes are forming from a parent node i want to color the nodes of the whole graph in a manner that each parent node has a fixed color and the child nodes has different color i.e a root node always have red color and the left child is blue and the right one is green and if only one child is there it is green .I am using this api ,,

<!DOCTYPE html>
<html>
 <head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"></script>
    <style type="text/css">

 line.link {
  stroke: #ccc;
}

circle.node {
 fill: #000;
 stroke: #fff;
 stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

   var w = 960,
  h = 500,
  r = d3.scale.sqrt().domain([0, 20000]).range([0, 20]);

 var force = d3.layout.force()
.gravity(.01)
.charge(-120)
.linkDistance(60)
.size([w, h]);

var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);

d3.xml("flare.xml", "application/xml", function(xml) {
  var nodes = self.nodes = d3.select(xml).selectAll("*")[0],
    links = self.links = nodes.slice(1).map(function(d) {
      return {source: d, target: d.parentNode};
     });

  force
  .nodes(nodes)
  .links(links)
  .start();

  var link = svg.selectAll("line.link")
  .data(links)
.enter().append("svg:line")
  .attr("class", "link")
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

  var node = svg.selectAll("circle.node")
  .data(nodes)
  .enter().append("svg:circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return r(d.textContent) || 5; })
  .call(force.drag);

    force.on("tick", function() {
    nodes[0].x = w / 2;
    nodes[0].y = h / 2;

   link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

      node.attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; });
     });
    });

    </script>
  </body>
 </html>

can anyone help me

Upvotes: 4

Views: 21271

Answers (1)

Thibaud Colas
Thibaud Colas

Reputation: 1266

SVG has its own CSS properties, one of which being fill. It sets the fill color of an SVG element.

Here is how you use it with D3:

var node = svg.selectAll("circle.node")
  .data(nodes)
  .enter().append("svg:circle")
  .style("fill", function (d) { return '#1f77b4'; })
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return r(d.textContent) || 5; })
  .call(force.drag);

Here the color value (#1f77b4) will be the same for all nodes. If you want to color your nodes with a specific algorithm, D3 ships with predefined categorical color scales.

Edit: Here is a related SO question. One of its answers has a good custom ordinal color scale example.

Upvotes: 5

Related Questions