JSFiddle - React, Tailwind, and code Playground

CSS

.link {
fill: none;
stroke: #666;
stroke-width: 1.5px; 
}

  #licensing {
 fill: green;
 }

  .link.licensing {
  stroke: green;
  }

 .link.resolved {
 stroke-dasharray: 0, 2 1; 
 }

  circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
  }

   text {
   font: 10px sans-serif;
   pointer-events: none;
   text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
   }

JavaScript

var links = [ {
    source : "Microsoft",
    target : "Amazon",
    type : "licensing"
}, {
    source : "Microsoft",
    target : "HTC",
    type : "licensing"
}, {
    source : "Samsung",
    target : "Apple",
    type : "suit"
}, {
    source : "Motorola",
    target : "Apple",
    type : "suit"
}, {
    source : "Nokia",
    target : "Apple",
    type : "resolved"
}, {
    source : "HTC",
    target : "Apple",
    type : "suit"
}, {
    source : "Kodak",
    target : "Apple",
    type : "suit"
}, {
    source : "Microsoft",
    target : "Barnes & Noble",
    type : "suit"
}, {
    source : "Microsoft",
    target : "Foxconn",
    type : "suit"
}, {
    source : "Apple",
    target : "HTC",
    type : "suit"
}, {
    source : "Microsoft",
    target : "Inventec",
    type : "suit"
}, {
    source : "Samsung",
    target : "Kodak",
    type : "resolved"
}, {
    source : "LG",
    target : "Kodak",
    type : "resolved"
}, {
    source : "RIM",
    target : "Kodak",
    type : "suit"
}, {
    source : "Sony",
    target : "LG",
    type : "suit"
}, {
    source : "Kodak",
    target : "LG",
    type : "resolved"
}, {
    source : "Apple",
    target : "Nokia",
    type : "resolved"
}, {
    source : "Qualcomm",
    target : "Nokia",
    type : "resolved"
}, {
    source : "Kodak",
    target : "Samsung",
    type : "resolved"
}, {
    source : "Apple",
    target : "Samsung",
    type : "suit"
}, {
    source : "Kodak",
    target : "RIM",
    type : "licensing"
}, {
    source : "Kodak",
    target : "Qualcomm",
    type : "licensing"
} ];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name : link.source
    });
    link.target = nodes[link.target] || (nodes[link.target] = {
        name : link.target
    });
});

var width = 960, height = 500;

var force = d3.layout.force().nodes(d3.values(nodes)).links(links)
        .size([ width, height...