D3：`bubble.nodes` 未将正确的图形数据应用于数据集

Question

我正在尝试使用 D3 创建气泡图，但无法弄清楚为什么我的数据无法正确处理。我已经从 PHP 导入了处理后的数据，现在正在尝试运行 bubble.node 以便为图表的圆应用相关的图形数据（半径、x 坐标、y 坐标等） .).相反，我目前收到错误：

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 accessor 函数：

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

当然，您还需要附加一些视觉元素（如圆圈），而不仅仅是空组。

这是一个 example。

D3：`bubble.nodes` 未将正确的图形数据应用于数据集

D3: `bubble.nodes` not applying correct graphical data to dataset

javascript

json

bubble-chart

d3.js