Problems with json string at d3.js

Question

Some js:

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: data is not defined

There is no data. It should be root, as you have the parsed json stored in root — mohamedrias
– mohamedrias, Commented May 18, 2014 at 19:00
Why are you putting JSON notation directly in a JavaScript application only to immediately parse it? That doesn't make any sense. — cookie monster
– cookie monster, Commented May 18, 2014 at 19:26

mohamedrias · Accepted Answer · 2014-05-18 19:04:01Z

1

root = JSON.parse(cityDivision);
var arcs= d3.selectAll(".arc")
        .data(pie(root))
        .enter()

You don't have data variable anywhere, that's why .data(pie(data)) gives you error that data is undefined.

Replace it with .data(pie(root)).

Similarly in d3.js, there is no group.selectAll. Instead use d3.selectAll().

This should fix your issues

answered May 18, 2014 at 19:04

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problems with json string at d3.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related