[英]amCharts4 - How to style single link/edge between nodes in Force Directed Tree?
我正在使用am4Charts並且有一個帶有幾個節點的Force Directed Tree。 我想更改圖表中單個鏈接的筆觸寬度。
簡單的例子:
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
使用Javascript:
am4core.useTheme(am4themes_animated);
// Create chart
chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
// Create series
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
// Set data
series.data = [{
"name": "First",
"link": ["Second", "Third"],
"children": [{
"name": "A1", "value": 100, "link": ["B2"]
}, {
"name": "A2", "value": 60
}, {
"name": "A3", "value": 30
}]
}, {
"name": "Second",
"children": [{
"name": "B1", "value": 135
}, {
"name": "B2", "value": 98
}, {
"name": "B3", "value": 56
}]
}, {
"name": "Third",
"children": [{
"name": "C1", "value": 1
}]
}];
series.dataFields.linkWith = "link";
series.dataFields.id = "name";
// Set up data fields
series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.children = "children";
// Add labels
series.nodes.template.label.text = "{name}";
series.fontSize = 10;
series.minRadius = 15;
series.maxRadius = 40;
// series.centerStrength = 50;
// series.manyBodyStrength = 50;
series.links.template.strokeWidth = 5;
series.links.template.strokeOpacity = 1;
series.centerStrength = 0.5;
在文檔中,我找到了為所有鏈接設置strokeWidth
和strokeOpacity
的方法。
我已經嘗試制作第二個series
並將“第三”節點移動到該節點並僅為第二個系列設置strokeWidth
,但節點未連接。 即使它起作用,這似乎是一種相當復雜的方式。
如何設置兩個節點之間單個鏈接的strokeWidth
,例如從節點“First”到節點“Third”並保持所有其他鏈接不變,最好不將節點分成多個series
?
series.links.template.configField = 'configLink'; //maps configLink property of data nodes to the links
接着
{
"name": "Second",
"children": [{
"name": "B1", "value": 135
}, {
"name": "B2", "value": 98
}, {
"name": "B3", "value": 56
}],
configLink: {
fill: color,
stroke: color,
strokeWidth: 2
}
}
您還可以添加適配器:
series.links.template.adapter.add('stroke', (stroke, target) => {
if (target.dataItem.id === 'somenodesID') {
return am4core.color();
}
return am4core.color('#ddd');
});
為節點提供id屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.