如何控制分层边缘捆绑图表中的线条粗细？

是否可以增加/减少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);

来源

2016-12-31 Dinosaurius

的问题是，在你的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/

来源

2016-12-31 14:27:59

你有任何建议如何使这一类型的图表提供更多的信息？也许颜色渐变会更好地定义厚度而不是仅使用宽度？或者，也许stroe宽度应该是对数尺度？ – Dinosaurius

根据'size'的值来改变颜色（除了thinckness）之外，我尝试了这一点，但它似乎不起作用：'var colors = [“＃c7e9b4”，“＃41b6c4”，“＃1d91c0”， “＃225ea8”]; var colorScale = d3.scale.threshold（） .domain（0，d3.max（classes，function（d）{return d.size}）]） .range（colors）; （d）{ return colorScale（d [0] .size） }）;' – Dinosaurius

@Dinosaurius，对于你的'colorScale'，你可能想使用'd3.scale .quantile'和'd3.extent'。另外，你需要设置笔划'style'（而不是attr），因为你的css已经定义了笔画风格 - [风格更具体，然后是attr]（https://developer.mozilla.org/en-US/docs/网络/ CSS /特异性）。看到这个更新[小提琴]（https://jsfiddle.net/cad2m2ue/1/） – Mark

如何控制分层边缘捆绑图表中的线条粗细？

回答

相关问题