Question

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

例如，在输入数据中定义了size，但我没有在图表中看到它的效果。当尺寸较大时，是否有可能制作更“胖”的线？

我添加了这行代码：

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

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

 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

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

因此，要仅获取源的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/

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

1 个答案: