Javascript 如何从SVG文件制作可点击的地图？

目前我正在学习Javascript

我正在尝试的是制作一张显示数据的可点击的德国地图。 就像

阿姆查特提供。但它似乎与上面的不一样

我有一些德国的数据，想按地区显示，如上所示

我知道首先我需要在html上加载jquery，但不知道如何使用SVG

---

你能告诉我怎么走吗？提前感谢您。

我从未使用jquery操作过现有的svg。要操作现有的svg，我可能建议尝试使用d3.js

也许这篇文章会帮助你从它开始

---

或者，您也可以像教程中那样使用d3.js创建choropleth地图。

有必要使用组标记将每个

路径

包装起来，并在其中添加标记，其中将显示德国的土地名称

<title>"Baden-Wurttemberg" </title>
        <path id="DE-BW"   class="land" d="M180.99,750.43l0.58,2.09l-3.47,0.13L180.99,750.43zM206.4,570.93l8.66,-0.33l4.12,-7.25l6.54,0.95l0.83,-6.5l-2.07,-1.9l-1.84,2.62l0.97,-2.42l-4.96,-0.95l1.24,-2.93l11.93,-2.03l3.81,4.36l0.36,-3.78l5.23,-0.86l-1.54,8.57l1.8,1.69l3.63,-3.95l1.67,3.87l3.98,-4.23l4.61,11.83l-3.88,5.45l3.04,0.98l3.58,-3.6l0.77,9.54l5.81,-0.09l2.95,-6.01l3.68,3.64l-1.77,6.05l4.31,5.07l-3.48,1.64l3.18,9.66l-2.99,2.1l0.91,5.72l7.87,4.93l-2.46,4.64l2.62,0.9l-0.01,5l6.23,1.2l6.94,10.77l-2.17,1.09l1.94,4.53l-2.36,10.79l4.98,5.72l-5.35,2.5l1.74,-3.05l-1.91,-0.44l-3.02,4.26l-5.88,-4.76l-0.89,3.63l4.3,5.42l-0.75,8.22l-4.84,1.1l-4.09,5.13l-4.1,-1.88l-4.39,1.77l-4.24,7.74l6.02,9.22l4.53,16.17l-3.72,23.3l3.8,5.37l-4.73,2.12l3.47,2.57l0.82,7.82l-3.45,3.6l-3.16,-4.43l-3.99,3.28l-7.15,-2.49l-6.35,6.24l-7.29,0.87l-2.47,5.16l0,0l-32.49,-12.44l-12.39,2.97l-5.46,-8.47l-2.45,1.83l1.4,4.16l-4.17,-1.79l-0.25,-6.73l-1.86,0.82l-2.53,-4.15l-1.61,3.9l-0.73,-3.78l-3.23,-0.87l0.58,2.52l-5.88,1.11l-4.98,9.09l4.45,3.28l8.21,-3.17l1.48,2.35l-3.33,4.98l-3.59,-3.6l-4,2.98l1.93,2.27l-6.63,1.06l-11.33,-5.16l-7.36,5.95l-9.36,1.3l-3.24,-4.09l-4.44,-0.06l-8.25,5.23l-3.72,-2.72l3.29,-0.43l0.41,-3.27l-6.5,1.03l-5.01,-10.15l2.32,-3.43l0.55,-13.76l4.19,-8.82l-3.37,-5.92l0.47,-8.22l7.41,-17.3l3.29,-2.43l-0.78,-6.43l6.8,-23.67l8.46,-11.19l7.49,-4.36l9.11,-15.81l0,0l8.06,-13.06l2.02,-13.01l6.23,-5.87l-2.43,-2.9l3.64,-10.75l-4.12,-1.49l-1.29,-13.08l0,0l3.37,0.03l5.46,6.77l3.5,-2.61l-1.32,-6.75l6.19,-1.33l0.61,8.58l7.72,1.09l0.59,3.21l4.26,-1.08l-1.4,3.51l-3.26,-0.13l-1.54,5.66l3.08,1.47l6.37,-5.89l0.1,-4.73l11.14,-1.27l-3.41,-4.71L206.4,570.93z"/>
    </g> 

.land
{
填写：#中交；
填充不透明度：1；
笔画：白色；
笔画不透明度：1；
笔画宽度：0.5；
变换原点：中心；
变换框：填充框；
过渡：1s；
}
.陆地{
填充：道奇蓝；
笔画：白色；
笔画宽度：2px；
-webkit转换：规模（1.2）；
转换：比例（1.2）；
}

“柏林”
“勃兰登堡”
“不来梅”
“汉堡”
“黑森”
“梅克伦堡-沃波默恩”
------------------------------------
面积•总面积-23174平方公里（8948平方英里）
首都施韦林
ISO 3166代码DE-MV
“下萨克森州”
“北莱茵-威斯特伐利亚”
“萨克森”
“萨克森安哈尔特”
“石勒苏益格-荷斯坦”
------------------------------------
面积•总面积-15763.18平方公里（6086.20平方英里）
首都基尔
ISO 3166代码DE-SH
“图林根”

您可以很容易地将您引用的美国示例（）更改为德国，如下所示

最重要的是，请参考德国数据：

<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>

并使用德国国家ID设置德国数据。您可以将数据更改为所需：

polygonSeries.data = [
    {
      id: "DE-BB",
      value: 4447100
    },
    {
      id: "DE-BE",
      value: 626932
    },
    ...
]

完整演示如下：

及以下:

//
//console.log（window.am4core）；
//console.log（window.am4geodata\u germanyLow）；
window.am4core.ready（函数（）{
//主题开始
window.am4core.useTheme（am4themes\u动画）；
//主题结束
//创建地图实例
var chart=window.am4core.create（“chartdiv”，window.am4maps.MapChart）；
//设置地图定义
chart.geodata=window.am4geodata\u germanyLow；
//集合投影
//chart.projection=new window.am4maps.projections.Albers（）；
//创建地图多边形系列
var polygonSeries=chart.series.push（new window.am4maps.mappygonseries（））；
//为每个区域设置最小/最大填充颜色
polygoseries.heatRules.push({
属性：“填充”，
目标：polygonSeries.mapPolygons.template，
最小值：图表。颜色。获取索引（1）。加亮（1），
最大值：图表。颜色。getIndex（1）。加亮（-0.3）
});
//使地图从GeoJSON加载多边形数据（状态形状和名称）
polygoseries.useGeodata=true；
//为每个状态设置热图值
polygonSeries.data=[
{
id:“DE-BB”，
价值：4447100
},
{
id:“DE-BE”，
价值：626932
},
{
id:“DE-BW”，
价值：5130632
},
{
id:“DE-BY”，
价值：2673400
},
{
id:“DE-HB”，
价值：33871648
},
{
id:“德和”，
价值：4301261
},
{
id:“DE-HH”，
价值：3405565
},
{
id:“DE-MV”，
价值：783600
},
{
id:“德尼”，
价值：15982378
},
{
id:“DE-NW”，
价值：8186453
},
{
id:“DE-RP”，
价值：1211537
},
{
id:“DE-SH”，
价值：1293953
},
{
id:“DE-SL”，
价值：12419293
},
{
id:“DE-SN”，
价值：6080485
},
{
id:“DE-ST”，
价值：2926324
},
{
id:“德-斯”，
价值：2688418
}
];
//建立热传奇
让heatLegend=chart.createChild（window.am4maps.heatLegend）；
heatLegend.series=polygonSeries；
heatLegend.align=“右”；
heatLegend.valign=“底部”；
heatLegend.width=window.am4core.percent（20）；
heatLegend.marginRight=window.AM4核心百分比（4）；
heatLegend.minValue=0；
heatLegend.maxValue=40000000；
//使用轴范围设置自定义热图图例标签
var minRange=heatLegend.valueAxis.axisRanges.create（）；
minRange.value=heatLegend.minValue；
minRange.label.text=“Little”；
var maxRange=heatLegend.valueAxis.axisRanges.create（）；
maxRange.value=heatLegend.maxValue；
maxRange.label.text=“很多！”；
//清空内部热量图例值轴标签
heatLegend.valueAxis.renderer.labels.template.adapter.add（“文本”），函数(
标签文本
) {
返回“”；
});
//配置系列工具提示
var polygontamplate=polygonSeries.mapPolygons.template；
PolygContemplate.tooltipText=“{name}:{value}”；
polygonTemplate.nonScalingStroke=true；
polygonTemplate.strokeWidth=0.5；
//创建悬停状态并设置替代填充颜色
var hs=polygonTemplate.states.create（“悬停”）；
hs.properties.fill=window.am4core.color（“#3c5bdc”）；
}); // 结束am4core.ready（）

#chartdiv{
宽度：100%；
高度：500px
}

您是否将热图与显示热度数据的专题图混淆了？假设您想要创建一个主题图：您是否在询问如何使用amchart库实现一个主题图？您想用jquery做什么？您想修改现有的svg（德国地图）并根据德国数据填充/着色吗？@ManuelWaltschek抱歉，我把您弄糊涂了。是的，我想修改现有的svg（德国地图），并根据德国数据对其进行填充/着色。我已经有了数据和SVG文件。问题是德国SVG文件不像我上面提到的那样工作。

// Set map definition
  chart.geodata = window.am4geodata_germanyLow;

polygonSeries.data = [
    {
      id: "DE-BB",
      value: 4447100
    },
    {
      id: "DE-BE",
      value: 626932
    },
    ...
]