Javascript d3js：向分层边缘绑定添加定量维度

考虑到Mike Bostock关于分层边缘绑定（）的示例，如何在图中添加定量维度

例如，我想要实现的是，“可视化”（12点）和“SpanningTree”（1点）之间的链接具有50%的透明度，“可视化”和“AspectRatioBanker”（1点）之间的链接具有0%的透明度。让我们假设“SpanningTree”比“AspectRatiobanker”对“可视化”的重要性要小，我想用这个渐变色阶来可视化这一方面

考虑到数据，

“imports”

数组中的每个元素都必须有一个数值，表示该元素的“重要性”

考虑到d3，每个链接都必须基于该数值着色

---

是否有可能在不更改太多示例代码的情况下添加这样的功能

如果我正确理解您的问题，您希望从以下数据开始：

[
  {
    "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
      }
    ]
  },
  ...

然后根据导入中的

值

属性为链接着色

要在链接的示例中执行此操作，请修改

packageImports

函数以保留

links

集合中的value属性：

// 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;
}

然后在附加节点时添加颜色：

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
  });

var colorScale=d3.scale.quantize（）
.范围（[“2c7bb6”、“00a6ca”、“00ccbc”、“90eb9d”、“ffff8c”、“f9d057”、“f29e2e”、“e76818”、“d7191c”））
.域名（[0100]）；
...
链接=链接
.数据（捆绑（链接））
.enter（）.append（“路径”）
.each（函数（d）{d.source=d[0]，d.target=d[d.length-1]；}）
.attr（“类”、“链接”）
.attr（“d”，行）
.样式（“笔划”，功能（d）{
返回色标（d.目标值）；//我认为这是一个错误的堆栈溢出问题。你没有一个明确的问题。你尝试了一些东西，但不能让它工作，但更多的想法是你想做什么，并寻找人为你做这件事？一般来说，如果每一个导入都有一个数值，你可以基于该值的颜色和不透明度。实际上，这就是ng进行工作并了解示例代码中发生的情况。回答您的问题，这是可能的，但不会更改太多代码？我不知道，可能不会。什么太多？您是否尝试过更改示例？当您说
每个链接都必须基于此数值上色时，您是指基于值或基于值或两者的不透明度？没关系，我明白你的意思，你是说它当前使用不透明度以重要性为基础，而你更愿意使用颜色…谢谢你的努力！我会接受你的答案，因为它大体上回答了我的问题。我希望颜色只出现在（mousover）上的
，但这似乎是一项微不足道的任务，我不需要任何帮助。