D3: `bubble.nodes` не применяет правильные графические данные к набору данных

Question

Я пытаюсь создать пузырьковую диаграмму, используя D3, но не могу понять, почему мои данные не обрабатываются правильно. Я импортировал обработанные данные из PHP и сейчас пытаюсь запустить bubble.node чтобы применить соответствующие графические данные для кругов диаграммы (радиус, координата х, координата у и т. д.). Вместо этого я в настоящее время получаю ошибку:

Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"

Вот код (пока; здесь остановились из-за ошибки):

$(document).ready(function() {
    // pull data from php file
    var topFrequency = '<?php echo json_encode($frequencyJSON)?>';

    var diameter = 510;

    // create new pack layout
    var bubble = d3.layout.pack()
                   .sort(null)
                   .size([diameter, diameter]);

    // select chart3 div and append svg canvas for graph
    var canvas = d3.select(".chart3").append("svg")
                                     .attr("width", diameter)
                                     .attr("height", diameter)
                                     .append("g");

    jsonData = JSON.parse(jsonData);

    // should return array of nodes associated with data
    // computed position of nodes & graphical data for each node
    var nodes = bubble.nodes(topFrequency);

    var node = canvas.selectAll(".node")
                     .data(nodes)
                     .enter()
                     .append("g")
                     // give nodes a class name for referencing
                     .attr("class", "node")
                     .attr("transform", function (d) {
                         return "translate(" + d.x + "," + d.y + ")";
                     });
});

topFrequency выглядит так в console.log:

{"name":"frequencyData",
    "children":[
        {
            "author1":"TUYTTENS, FAM",
            "frequency":7
        },
        {
            "author1":"REVILLA, E",
            "frequency":7
        },
        {
            "author1":"ROPER, TJ",
            "frequency":7
        },
        {
            "author1":"MACDONALD, DW",
            "frequency":6
        },
        {
            "author1":"WOODROFFE, R",
            "frequency":5
        },
        {
            "author1":"CHEESEMAN, CL",
            "frequency":4
        },
        {
            "author1":"GALLAGHER, J",
            "frequency":4
        },
        {
            "author1":"KOWALCZYK, R",
            "frequency":3
        },
        {
            "author1":"HANCOX, M",
            "frequency":3
        },
        {
            "author1":"VIRGOS, E",
            "frequency":3
        }
    ]
}

Насколько я могу сказать, я получаю undefined ошибка выше, потому что атрибуты x и y не создаются в массиве узлов, но я не могу понять, почему. Возможно, мои данные в неправильном формате?

** РЕДАКТИРОВАТЬ **

добавленной JSON.parse(topFrequency) чтобы получить данные в правильном формате. Сейчас console.log(jsonData) дает:

Object {name: "frequencyData", children: Array[10]}
children: Array[10]
    0: Object
        author1: "CARTES, JE"
        depth: 1
        frequency: 10
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    1: Object
        author1: "SASSEN, R"
        depth: 1
        frequency: 8
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    2: Object
    3: Object
    4: Object
    5: Object
    6: Object
    7: Object
    8: Object
    9: Object
    length: 10
depth: 0
name: "frequencyData"
r: NaN
value: 0
x: NaN
y: NaN

Хотя теперь он возвращает правильные атрибуты, он возвращает NaN для значений. Он также делает это, прежде чем я позвоню bubble.nodes; Я думал, что эти атрибуты были добавлены bubble.nodes!

Answer 1

Вам не хватает value функция доступа к вашим данным:

var bubble = d3.layout.pack()
  .sort(null)
  .value(function(d){
    return d.frequency; //<-- frequency is your accessor
  })
  .size([diameter, diameter]);

Конечно, вам также нужно добавить некоторый визуальный элемент (например, круги) вместо просто пустых групп.

Вот пример.