从局部变量加载 D3

Question

嗨，我有这个变量 myJSON，我想在我的 d3 力图中使用它，这是变量的输出。我想知道是否有任何方法可以使用变量来填充我的图表。

var myJSON;

$.ajax({
type: "POST",
url: "http://localhost/web/search.php",
async: false,
data: {
    "dataA": string2
},
cache: false,
success: function(data) {
    myJSON = JSON.parse(data);
},
});

只需将变量放入图形代码中，但它一直给我这个错误uncaught exception: [object ProgressEvent] 有人知道为什么这不起作用吗？任何建议将不胜感激。

d3.json("myJSON", function(error, graph) { if (error) throw error;

Answer 1

'd3.json' 函数从文件或 url 加载数据。要使用本地 json 变量，只需进行一些更改。

比如你有一个d3网站的demo，文件“data.json”中的数据是

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1}
   ],
    "links": [
      {"source": "Napoleon", "target": "Myriel", "value": 1}
    ]
}

演示是这样的

d3.json("data.json", function(error, data){
    if(error) throw error;
    console.log(data);

    //some code...
});

这意味着从一个名为“data.json”的文件中加载数据。

现在如果你已经有了 json 变量数据

var data = {
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1}
   ],
    "links": [
      {"source": "Napoleon", "target": "Myriel", "value": 1}
    ]
};

随便用吧，把代码改成：

console.log(data);
//some code...

建议：

您可以从 url 加载数据，就像评论所说的那样。使用 AJAX 从 url 加载数据，并将其解析为 d3 代码只需 d3 即可完成。 d3 将从 url 获取数据。

d3.json("http://localhost/web/search.php", function(error, data){
    if(error) throw error;
    console.log(data);

    //some code...
});

Answer 2

如 cmets 中所述。 D3 将为您处理 AJAX。如果您加载示例并查看 chrome 中的网络选项卡。可以看到miserables.json正在加载中。

这段代码实际上是在为你创建一个 AJAX GET 请求。

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;
  ...

你可以试试d3.json("http://localhost/web/search.php?dataA=string2", ... 或者可以选择自己加载。并用您的 JSON 替换 graph.nodes。

.selectAll("circle")
    .data(graph.nodes)