v4自定义SVG

Question

是否有一种方法来动态地构建一个SVG使用星图4中的精灵？

示例：截屏热

有20种不同的类型，它们都是用颜色表示的。每个引脚可以包含多种类型。因此，一个例子可以是一个引脚有3种类型，将由3种颜色组成。

我有一个SVG路径，它是一个圆。使用常规的JS和SVG，我可以为每种类型创建一个路径，并更改笔画颜色、strokedasharray和strokedashoffset。这导致了漂亮的3种颜色的圆圈。

然而，这似乎是不可能做到与表4。

首先，strokedashoffset甚至不是sprite支持的属性。你为什么要费心支持抚摸，然后忽略抚摸呢？！

第二个问题是找出如何将数据传递给sprite。

这是我传递给mapImageSeries类的数据对象的一个例子。

[{
amount: 3,
client: undefined,
colorsArr: {0: "#FFB783", 1: "#FD9797", 2: "#77A538"},
dashArray: "500,1000",
dashOffset: 1500,
divided: 500,
global: true,
groupId: "minZoom-1",
hcenter: "middle",
id: "250",
latitude: 50.53398,
legendNr: 8,
longitude: 9.68581,
name: "Fulda",
offsetsArr: {0: 0, 1: 500, 2: 1000},
scale: 0.5,
title: "Fulda",
typeIds: (3) ["4", "18", "21"],
typeMarker: " type-21 type-18 type-4",
vcenter: "bottom",
zoomLevel: 5
}]

把颜色传给精灵似乎是不可能的。

var svgPath = 'M291,530C159,530,52,423,52,291S159,52,291,52s239,107,239,239c0,131.5-106.3,238.3-237.7,239'
var mainPin1 = single.createChild(am4core.Sprite)
mainPin1.strokeWidth = 100
mainPin1.fill = am4core.color('#fff')
mainPin1.stroke = am4core.color('#ff0000')
mainPin1.propertyFields.strokeDasharray = 'dashArray'
mainPin1.propertyFields.strokeDashoffset = 'dashOffset'
mainPin1.path = svgPath
mainPin1.scale = 0.04
mainPin1.propertyFields.horizontalCenter = 'hcenter'
mainPin1.propertyFields.verticalCenter = 'vbottom'

Answer 1

通过您提供的内容，模拟您的自定义SVG超出了可以回答的范围，因此我将尝试解决以下问题：

1. 尽管缺乏与生俱来的库支持，但仍然应用stroke-dashoffset。(我看到您已经为它添加了GitHub上的一个功能请求，所以为什么库不包括它，如果它愿意的话，可以留在那里讨论。)
2. 将数据/颜色传递给Sprite

对于这两种情况，我们都必须等到Sprite的实例和它们的数据准备就绪。假设您的single变量是对MapImageSeries.mapImages.template的引用，我们可以像这样设置事件：

single.events.once("inited", function(event){
  // ...
});

我们的数据和数据占位符一般不支持嵌套数组/对象，因为您的颜色嵌套在字段中，我们可以通过以下方法找到它们：

event.target.dataItem.dataContext.colorsArr

然后，您可以从那里手动在fill或event.target.children.getIndex(0)上设置Sprite和event.target.children.getIndex(0)(在下面的演示中，索引将是1，因为mainPin1不是在MapImage模板上创建的第一个/唯一的子程序)。

至于stroke-dashoffset，您可以通过sprite.group.node访问实际呈现的SVGElement，只需使用setAttribute。

我将我们的地图图像演示从地图图像数据指南中分叉出来，并在这里添加了上述所有内容：

https://codepen.io/team/amcharts/pen/6a3d87ff3bdee7b85000fe775af9e583

​

​