SVG，Raphael.js，JSON 数据 - 不知道如何让描述出现

Question

我一直在构建英格兰的自定义 SVG 地图，并试图让数组数据的片段出现在地图的底部。到目前为止，我已经获得了显示的标题，但在我的描述字段中不断获得 'undefined'。

我的数据结构如下：

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;

我试图在代码中定义更高的 'description'，但我不确定如何将它绑定到 array/data 中包含我想在页面上显示的信息的字段.

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

如果您能提供帮助，在此先感谢您。

马特

Answer 1

这是一种方法。

首先，绘制时，为每条路径指定一个id "regionN"，其中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

SVG，Raphael.js，JSON 数据 - 不知道如何让描述出现

SVG, Raphael.js, JSON data - can't figure out how to get description to appear

javascript

svg

json

raphael