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

问题

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.

My data is structured like this:

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,........},

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

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;

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.

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

回答1:

Here's one way to do it.

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

来源：https://stackoverflow.com/questions/31235512/svg-raphael-js-json-data-cant-figure-out-how-to-get-description-to-appear

标签

javascript

json

svg

raphael