时间戳

首页 > 解决方案 > 使用 JSON - D3 布局包时 X 和 Y 为 NaN

d3.js - 使用 JSON - D3 布局包时 X 和 Y 为 NaN

问题描述

我正在尝试使用 D3 布局包来制作某种气泡图。但是，如果我尝试实现它，我会发现我的 X 和 Y 是 NaN。

这是我工作的 JSfiddle。

https://jsfiddle.net/xkd5uw28/

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

编辑：我一直在关注这个 jsfiddle。我什至尝试控制台记录该数据并将其与我的数据进行比较。我没有得到 r、x 或 y，而另一个得到了它。

标签： d3.js

解决方案

如果您查看API 文档，它会指出：

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

它还与一些示例数据并列

{
 "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"
                    }
        }
];

推荐阅读