javascript - SVG、Raphael.js、JSON 数据 - 无法弄清楚如何显示描述

Question

我一直在构建英格兰的自定义 SVG map ，并尝试让数组数据片段出现在 map 的底部。到目前为止，我已经看到了标题，但我的描述字段一直显示“未定义”。

我的数据结构如下:

var regions = [
{'title':"Northeast England",'description':"<p>Paragraph</p><p>Does adding HTML here work?</p>", 'path' : "M219.02,6.876l-0.079,0.05l-0.482,0.371L218.23,7.47l-0.858,0.346h-0.008l-0.307,0.26l-0.779,0.666 l-0.104,0.278l-0.005,0.019l0.056,0.481l0.116,0.846l0.048,0.395l-0.344,1.05l-0.052-0.007v0.007l-0.635-0.081l-0.375,0.167 l-0.148,0.061v0.006l-0.1,0.328l0.178,........},

我希望我的描述包含一些段落和一些 HTML，以便我能够设置指向相关报告的链接。

我尝试在 JS 中生成描述的方式如下:

document.getElementById('title').innerHTML = title;
document.getElementById('descr').innerHTML = description;

我尝试在代码中更高的位置定义“描述”，但不确定如何将其与数组/数据中包含我想要在页面上显示的信息的字段联系起来。

我的完整 Codepen 版本是:http://codepen.io/msummers40/pen/wamMry

如果您能够提供帮助，请提前致谢。

马特

Answer 1

这是一种方法。

首先，在绘制时，为每个路径指定一个“regionN”的 id，其中 N 是该区域的数组索引。 “region”前缀只是为了避免重复的 id，以防页面上有其他 id 为“0”的内容。

var id = 0;
regions.forEach(function(region){
    var path = map.path(region.path);
    path.node.id = 'region' + (id++);
    group.push(path);
});

然后，单击时，拉出数组索引并使用它来查找标题和说明。

var index = this.node.id.split('region')[1];
var title = regions[index].title;
var description = regions[index].description;

http://codepen.io/anon/pen/GJxqqV