0

I'm trying to add json string to my d3.js app

var cityDivisionJSON='[{"city":"Челябинск","percentage":"66.67"},{"city":"Аша","percentage":"16.67"},{"city":"Бакал","percentage":"16.67"},{"city":"Верхний Уфалей","percentage":"0"},{"city":"Еманжелинск","percentage":"0"},{"city":"Златоуст","percentage":"0"},{"city":"Карабаш","percentage":"0"},{"city":"Карталы","percentage":"0"},{"city":"Касли","percentage":"0"},{"city":"Катав-Ивановск","percentage":"0"},{"city":"Коркино","percentage":"0"},{"city":"Куса","percentage":"0"},{"city":"Кыштым","percentage":"0"},{"city":"Магнитогорск","percentage":"0"},{"city":"Миасс","percentage":"0"},{"city":"Миньяр","percentage":"0"},{"city":"Нязепетровск","percentage":"0"},{"city":"Сатка","percentage":"0"},{"city":"Сим","percentage":"0"},{"city":"Снежинск","percentage":"0"},{"city":"Трехгорный","percentage":"0"},{"city":"Троицк","percentage":"0"},{"city":"Усть-Катав","percentage":"0"},{"city":"Чебаркуль","percentage":"0"},{"city":"Южноуральск","percentage":"0"},{"city":"Юрюзань","percentage":"0"}]';
    root=JSON.parse(cityDivisionJSON);
    var arcs=group.selectAll(".arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class","arc")
        .on("mouseover",toggleArc)
        .on("mouseleave",toggleArc)
        .append("path")
        .attr("d",arc)
        .attr("fill",function(d){return color(d.data.percentage);});
        group
        .append("circle")
        .style("fill","white")
        .attr("r",radius-20);

It says:

Uncaught SyntaxError: Unexpected token ILLEGAL

EDIT: I've added utf-8, result is the same

<html lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">

Why? Also, here is fiddle. EDIT Now it is one string: says:

Uncaught ReferenceError: data is not defined 
Sergey Scopin
  • 2,217
  • 9
  • 39
  • 67
  • You need to declare the page to be UTF-8. – Lars Kotthoff May 18 '14 at 18:22
  • Updated and added fiddle. – Sergey Scopin May 18 '14 at 18:29
  • Try removing the line breaks in the cityDivision string. http://jsfiddle.net/m6bd5/ – mathewbergt May 18 '14 at 18:31
  • is each line of text for the json text actually on a new line? you cannot do multiline strings in javascript without using a \ at the end of each line – Patrick Evans May 18 '14 at 18:35
  • Now it says that data not found, but accoding to this that should work. http://stackoverflow.com/questions/10934853/d3-js-loading-json-without-a-http-get – Sergey Scopin May 18 '14 at 18:40
  • Have you declared the data variable which is is passed in the following call? `.data(pie(data))` It is not declared in the Fiddle example you provided. – mathewbergt May 18 '14 at 18:42
  • After i have made changes to the JSON string, its throwing ReferenceError: group is not defined error. When i checked the source code, you have group.selectAll but group is undefined. The json is getting parsed properly now – mohamedrias May 18 '14 at 18:50

1 Answers1

1
var cityDivision = '[\
{"city":"Челябинск","percentage":"66.67"},\
{"city":"Аша","percentage":"16.67"},\
{"city":"Бакал","percentage":"16.67"},\
{"city":"Верхний Уфалей","percentage":"0"},\
{"city":"Еманжелинск","percentage":"0"},\
{"city":"Златоуст","percentage":"0"},\
{"city":"Карабаш","percentage":"0"},\
{"city":"Карталы","percentage":"0"},\
{"city":"Касли","percentage":"0"},\
{"city":"Катав-Ивановск","percentage":"0"},\
{"city":"Коркино","percentage":"0"},\
{"city":"Куса","percentage":"0"},\
{"city":"Кыштым","percentage":"0"},\
{"city":"Магнитогорск","percentage":"0"},\
{"city":"Миасс","percentage":"0"},\
{"city":"Миньяр","percentage":"0"},\
{"city":"Нязепетровск","percentage":"0"},\
{"city":"Сатка","percentage":"0"},\
{"city":"Сим","percentage":"0"},\
{"city":"Снежинск","percentage":"0"},\
{"city":"Трехгорный","percentage":"0"},\
{"city":"Троицк","percentage":"0"},\
{"city":"Усть-Катав","percentage":"0"},\
{"city":"Чебаркуль","percentage":"0"},\
{"city":"Южноуральск","percentage":"0"},\
{"city":"Юрюзань","percentage":"0"}\
]';
root = JSON.parse(cityDivision);

This will overcome the error. It's because of the line breaks for each statement. YOu need to escape it with \.

mohamedrias
  • 18,326
  • 2
  • 38
  • 47