CODEWITHSUNDEEP
jqueryd3.js
Sergey Scopin
Sergey Scopin

Reputation: 2245

Problems with json string at d3.js

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

Upvotes: 0

Views: 49

Answers (1)

mohamedrias
mohamedrias

Reputation: 18566

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

Upvotes: 1

Related Questions