javascript - amCharts4 - 如何在 Force Directed Tree 中的节点之间设置单个链接/边缘的样式?
问题描述
我正在使用 am4Charts 并且有一个带有几个节点的强制定向树。我想更改图表中单个链接的笔画宽度。
简单的例子:
<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 属性。
推荐阅读
- javascript - 我的自定义 Netlify 无服务器函数不会从 Prismic API 获取数据
- python - 在pycharm中,如何增加每个py文件运行时的内存?
- react-native - 使用 useEffect 和 async/await 将数据提取到 redux 第一次不起作用
- mysql - 是否可以只将一列粘贴到mysql中的另一个表?
- swift - SCNView 侧边框在用户交互期间消失
- python - 有没有一种简单的方法来创建与 python 统一的游戏相关功能?
- r - 如何将列表中的多个向量迭代地存储到数据框列表中的适当列中?
- database - 什么是双向关系
- blazor-server-side - 使用 Blazor 服务器自动刷新
- javascript - Javascript - 如何展平数组中数组的第一个位置值?