score:1

Accepted answer

If I understand your question correctly you want to start with data like:

[
  {
    "name": "flare.analytics.cluster.AgglomerativeCluster",
    "size": 3938,
    "imports": [
      {
        "link": "flare.animate.Transitioner",
        "value": 47.194114234125514
      },
      {
        "link": "flare.vis.data.DataList",
        "value": 66.57002100495298
      },
      {
        "link": "flare.util.math.IMatrix",
        "value": 5.987508739765435
      },
      {
        "link": "flare.analytics.cluster.MergeEdge",
        "value": 31.750046370493678
      },
      {
        "link": "flare.analytics.cluster.HierarchicalCluster",
        "value": 10.186873728884827
      },
      {
        "link": "flare.vis.data.Data",
        "value": 28.60757703865271
      }
    ]
  },
  ...

And then color the links based on the value property in the imports.

To do that given the linked example, modify the packageImports function to retain the value property in the links collection:

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
  var map = {},
      imports = [];

  // Compute a map from name to node.
  nodes.forEach(function(d) {
    map[d.name] = d;
  });

  // For each import, construct a link from the source to target node.
  nodes.forEach(function(d) {
    if (d.imports) d.imports.forEach(function(i) {
      var target = map[i.link]; // find the target
      target.value = i.value; // retain the value
      imports.push({source: map[d.name], target: target});
    });
  });
  return imports;
}

Then add the color when you append the nodes:

var colorScale = d3.scale.quantize()
  .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"])
  .domain([0,100]);

...

link = link
  .data(bundle(links))
  .enter().append("path")
  .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
  .attr("class", "link")
  .attr("d", line)
  .style("stroke", function(d){
    return colorScale(d.target.value); //<-- add color
  });

Full running code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #bbb;
}

.node:hover {
  fill: #000;
}

.link {
  fill: none;
  pointer-events: none;
}

.node:hover,
.node--source,
.node--target {
  font-weight: 700;
}

.link--source,
.link--target {
  stroke-opacity: 1;
  stroke-width: 2px;
}

.link--source {
  stroke: #d62728;
}

.link--target {
  stroke: #2ca02c;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    .sort(null)
    .value(function(d) { return d.size; });

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

d3.json("https://jsonblob.com/api/851bd2f2-d85d-11e6-b16a-ad927fd57221", function(error, classes) {
  if (error) throw error;
  
  var nodes = cluster.nodes(packageHierarchy(classes)),
      links = packageImports(nodes);
      
  var colorScale = d3.scale.quantize()
    .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"])
    .domain([0,100]);

  link = link
      .data(bundle(links))
    .enter().append("path")
      .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line)
      .style("stroke", function(d){
        return colorScale(d.target.value);
      })

  node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", ".31em")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
      .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .text(function(d) { return d.key; })
      //.on("mouseover", mouseovered)
      //.on("mouseout", mouseouted);
});

/*
function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .each(function() { this.parentNode.appendChild(this); });

  node
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

function mouseouted(d) {
  link
      .classed("link--target", false)
      .classed("link--source", false);

  node
      .classed("node--target", false)
      .classed("node--source", false);
}
*/

//d3.select(self.frameElement).style("height", diameter + "px");

// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
  var map = {};

  function find(name, data) {
    var node = map[name], i;
    if (!node) {
      node = map[name] = data || {name: name, children: []};
      if (name.length) {
        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
        node.parent.children.push(node);
        node.key = name.substring(i + 1);
      }
    }
    return node;
  }

  classes.forEach(function(d) {
    find(d.name, d);
  });

  return map[""];
}

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
  var map = {},
      imports = [];

  // Compute a map from name to node.
  nodes.forEach(function(d) {
    map[d.name] = d;
  });

  // For each import, construct a link from the source to target node.
  nodes.forEach(function(d) {
    if (d.imports) d.imports.forEach(function(i) {
      var target = map[i.link];
      target.value = i.value;
      imports.push({source: map[d.name], target: target});
    });
  });
  return imports;
}

</script>


Related Query

More Query from same tag