Question

我正在尝试使用D3 Layout Pack来制作某种气泡图。但是，如果我尝试实现它，我会得到我的X和Y是NaN。

这是我工作的JSfiddle。

https://jsfiddle.net/xkd5uw28/

正如您在控制台中看到的，我收到错误<g> attribute transform: Expected number, "translate(NaN, NaN)"。我做错了什么？

编辑：我一直关注this jsfiddle。我甚至尝试将数据控制到console.log并将其与我的数据进行比较。我不会得到r，x或y，而另一个得到它。

Answer 1

如果您查看API docs，请说明：

首先为层次结构
中的根节点调用子访问器

它还附有一些样本数据

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731}
     ]
    }
   ]
  }
 ]
}

数据提供给包布局需要采用这种分层形式。如果我们查看您的示例，但是您提供了一组数据，并且其中没有任何项目具有children属性。您需要修改数据的形状才能使用此布局。

const newData = [
                {
                "adjective": 
                    {
                        "en": "warm",
                        "sv": "varm"}
                },
                {
                    "adjective": 
                    {
                        "en": "clear",
                        "sv": "tydlig"
                    }
                },
                {
                    "adjective": 
                    {
                        "en": "creative",
                        "sv": "kreativ"
                    }
                },
                {
                    "adjective": 
                    {
                        "en": "responsible",
                        "sv": "ansvarstagande"
                    }
                },
                {
                    "adjective": 
                    {
                        "en": "social",
                        "sv": "social"
                    }
                },
                {
                    "adjective": 
                    {
                        "en": "calm",
                        "sv": "lugn"
                    }
        }
];

使用JSON-D3 Layout Pack时，X和Y为NaN

1 个答案: