如何控制 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)
})

这是一个小提琴：https://jsfiddle.net/cad2m2ue/