amCharts4 - 如何在 Force Directed Tree 中的节点之间设置单个 link/edge 的样式？

Question

我正在使用 am4Charts 并且有一个带有几个节点的力导向树。我想更改图中单个 link 的笔划宽度。

简单示例：

<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;

Codepen example

在文档中，我找到了一种为所有 link 设置 strokeWidth 和 strokeOpacity 的方法。

我已经尝试制作第二个 series 并将 "Third" 节点移至该节点并仅为第二个系列设置 strokeWidth，但节点未连接。即使它有效，这似乎也是一种相当复杂的方法。

如何在两个节点之间设置单个 link 的 strokeWidth，例如从节点 "First" 到节点 "Third" 并保留所有其他 link不变，最好不要将节点分成多个series?

Answer 1

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 属性。

amCharts4 - 如何在 Force Directed Tree 中的节点之间设置单个 link/edge 的样式？

amCharts4 - How to style single link/edge between nodes in Force Directed Tree?

javascript

amcharts