SVG，Raphael.js，JSON数据 - 无法弄清楚如何让描述出现 [英] SVG, Raphael.js, JSON data - can't figure out how to get description to appear

问题描述

我一直在构建英格兰的自定义SVG地图，并尝试将数组数据的各个部分显示在地图的底部。到目前为止，我已经获得了标题，但我的描述字段仍然是未定义。

I've been building a custom SVG map of England and trying to have pieces of the array data appear at the bottom of the map. So far I've gotten the title to appear but keep getting 'undefined' for my description field.

我的数据结构如下：

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，以便我设置相关报告的链接。

I want my description to contain a handful of paragraphs and some HTML to allow me to set up links to a related report.

我试图在我的JS中生成描述的方式是这样的：

The way that I'm attempting to generate the description in my JS is like this:

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

我试图在代码中定义'description'但不确定如何将它绑定到包含我想要在页面上显示的信息的数组/数据中的字段。

I've tried to define 'description' higher in the code but am not sure how to tie it to the field in the array/data that contains the information that I want to present on the page.

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

My full Codepen version of this is: http://codepen.io/msummers40/pen/wamMry

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

If you are able to help with this, thank you in advance.

Matt

推荐答案

这是一种方法。

首先，在绘制时，给每个路径一个id为regionN，其中N是数组索引该地区。 region前缀就是为了避免重复ID，以防你在页面上有其他ID为0的东西。

First, when drawing, give each path an id of "regionN" where N is the array index of the region. The "region" prefix is just there to avoid duplicate ids in case you have something else on the page with id "0".

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

然后，在点击时，拉出数组索引并使用它来查找标题和描述。

Then, on click, pull out the array index and use it to look up the title and description.

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数据 - 无法弄清楚如何让描述出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！