javascript - 如何控制 Hierarchical Edge Bundling 图表中线条的粗细？

Question

是否可以增加/减少 Hierarchical Edge Bundling 中的线条粗细？图表？

例如，在输入数据中定义了一个size，但我没有在图表中看到它的效果。是不是尺寸越大越“肥”？

我添加了这行代码:

.attr('stroke-width', function(d) { return d.size; })

...为了根据输入数据文件 readme-flare-imports.json 中的字段 size 定义 stroke-width >。但是，它没有任何效果。

 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('stroke-width', function(d) { return d.size; })
      .attr("d", line);

Answer 1

问题是 attr 函数中的 datum 是该特定节点的所有链接的数组。

因此，要仅获取源的 size 值，它应该是:

.attr("stroke-width", function(d){
    return d[0].size;
})

由于 size 属性的数值很大，我使用了一个比例，其中宽度从 1 到 10:

var sizeScale = d3.scale.linear()
    .domain([0, d3.max(classes, function(d){ return d.size})])
    .range([1, 10]);  

link.attr("stroke-width", function(d){
    return sizeScale(d[0].size)
})

这是一个 fiddle :https://jsfiddle.net/cad2m2ue/