Fatal编程技术网
  • javascript/
  • Javascript 使用d3.js从JSON文件读取数据

Javascript 使用d3.js从JSON文件读取数据

javascript json d3.js

Javascript 使用d3.js从JSON文件读取数据,javascript,json,d3.js,Javascript,Json,D3.js,我是d3.js的新手，我正在尝试重现示例B用于断开中的链接 正如您在本例的JSFIDLE中所看到的，数据是从标记读取的，但我想从不同的文件读取数据 正如本文所建议的，我使用了d3.json（）函数，但是当我添加了阈值滑块（该滑块应该会断开我的链接）时，什么也没有发生 当我运行控制台时，它给了我以下错误： Uncaught TypeError: Cannot read property 'splice' of undefined threshold @ index.html:82 onchang

我是d3.js的新手，我正在尝试重现示例
B用于断开中的链接

正如您在本例的JSFIDLE中所看到的，数据是从
标记读取的，但我想从不同的文件读取数据

正如本文所建议的，我使用了
d3.json（）
函数，但是当我添加了阈值滑块（该滑块应该会断开我的链接）时，什么也没有发生

当我运行控制台时，它给了我以下错误：


Uncaught TypeError: Cannot read property 'splice' of 
undefined
threshold @ index.html:82
onchange @ index.html:101


这是我的代码：

output.json

文件
output.json
位于中

index.html


<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

h3 {
    color: #1ABC9C;
    text-align:center;  
    font-style: italic;
    font-size: 14px;
    font-family: "Helvetica";
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var graph = d3.json("output.json", function(error, graph) {
  if (error) throw error;

  graphRec=JSON.parse(JSON.stringify(graph));

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});

//adjust threshold
function threshold(thresh) {
    graph.links.splice(0, graph.links.length);
        for (var i = 0; i < graphRec.links.length; i++) {
            if (graphRec.links[i].value > thresh) {graph.links.push(graphRec.links[i]);}
        }
    restart();
}
//Restart the visualisation after any node and link changes
function restart() {
    link = link.data(graph.links);
    link.exit().remove();
    link.enter().insert("line", ".node").attr("class", "link");
    node = node.data(graph.nodes);
    node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
    force.start();
}

</script>

<form>
    <h3> Link threshold 0 <input type="range" id="thersholdSlider" name="points" value = 0 min="0" max="10" onchange="threshold(this.value)"> 10 </h3>
</form>




.节点{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}
h3{
颜色：#1ABC9C；
文本对齐：居中；
字体：斜体；
字体大小：14px；
字体系列：“Helvetica”；
}
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-graph=d3.json（“output.json”），函数（错误，图形）{
如果（错误）抛出错误；
graphRec=JSON.parse（JSON.stringify（graph））；
力
.nodes（图.nodes）
.links（graph.links）
.start（）；
var link=svg.selectAll（“.link”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var node=svg.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.style（“fill”，函数（d）{返回颜色（d.group）；}）
.呼叫（强制拖动）；
node.append（“标题”）
.text（函数（d）{返回d.name；}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
});
//调整阈值
功能阈值（阈值）{
图链接拼接（0，图链接长度）；
对于（var i=0；ithresh）{graph.links.push（graphRec.links[i]）；}
}
重启（）；
}
//在任何节点和链接更改后重新启动可视化
函数重新启动（）{
link=link.data（graph.links）；
link.exit（）.remove（）；
link.enter（）.insert（“line”，“node”）.attr（“class”，“link”）；
node=node.data（graph.nodes）；
node.enter（）.insert（“圆圈”，“光标”）.attr（“类”，“节点”）.attr（“r”，“5”）.call（强制拖动）；
force.start（）；
}
链接阈值0 10


我做错了什么？我怎样才能修好它


谢谢
 我在你的代码中找不到任何bug。我能找到的唯一问题是变量名图使用了两次

vargraph=d3.json（“output.json”，函数（错误，graph）{

---------------------

---------------------

});

编辑：尝试此代码


var graphRec, node, link;
d3.json("output.json", function(error, graph) {
   if (error) throw error;
   graph = JSON.parse(JSON.stringify(graph));

   force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

   graphRec = graph;

   link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

   node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

   ------------------------
   ------------------------
});

//adjust threshold
function threshold(thresh) {
    graphRec.links.splice(0, graphRec.links.length);
        for (var i = 0; i < graphRec.links.length; i++) {
            if (graphRec.links[i].value > thresh) {graphRec.links.push(graphRec.links[i]);}
        }
    restart();
}
//Restart the visualisation after any node and link changes
function restart() {
    link = link.data(graphRec.links);
    link.exit().remove();
    link.enter().insert("line", ".node").attr("class", "link");
    node = node.data(graphRec.nodes);
    node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
    force.start();
}




链接阈值0 10

我在您的代码中找不到任何错误。我能找到的唯一问题是变量名图使用了两次

vargraph=d3.json（“output.json”，函数（错误，graph）{

---------------------

---------------------

});

编辑：尝试此代码


var graphRec, node, link;
d3.json("output.json", function(error, graph) {
   if (error) throw error;
   graph = JSON.parse(JSON.stringify(graph));

   force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

   graphRec = graph;

   link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

   node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

   ------------------------
   ------------------------
});

//adjust threshold
function threshold(thresh) {
    graphRec.links.splice(0, graphRec.links.length);
        for (var i = 0; i < graphRec.links.length; i++) {
            if (graphRec.links[i].value > thresh) {graphRec.links.push(graphRec.links[i]);}
        }
    restart();
}
//Restart the visualisation after any node and link changes
function restart() {
    link = link.data(graphRec.links);
    link.exit().remove();
    link.enter().insert("line", ".node").attr("class", "link");
    node = node.data(graphRec.nodes);
    node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
    force.start();
}




链接阈值0 10

尝试记录图形看看它能给你什么输出。json你能粘贴它吗too@Cyril我刚刚用
output.json
文件的链接更新了这篇文章。我试着把它贴到帖子上，但它太大了。@this one家伙你能告诉我怎么做吗？登录graph？console.log（graph）在您使用它之前，在您的阈值函数中（我认为会引发错误）尝试登录graph，看看它能为您提供什么输出。json您能粘贴它吗too@Cyril我刚刚用
output.json
文件的链接更新了这篇文章。我试着把它贴到帖子上，但它太大了。@this one家伙你能告诉我怎么做吗？在使用graph？console.log（graph）之前，当我删除
var-graph=
时，在阈值函数中（我取它时抛出错误），它会给我错误
Uncaught ReferenceError:graph未定义
声明一个新变量，并在d3.json回调函数中为该变量分配graph。在
threshold
和
restart
函数中使用新变量。由于您有一个名为graphRec的全局变量和数据，您也可以在
restart
和
restart
函数中使用它来代替图形。它给出了另一个错误
未捕获的引用错误：在函数
restart
和
restart
中未定义链接。这也是由于变量范围问题。在d3.json函数外部声明链接和节点变量。只需更新函数中的变量值。（重新启动函数中的行
link=link.data（graphRec.links）；
导致此问题。因为链接超出了此函数的范围。）当我删除
var-graph=
时，它会给我一个错误
Uncaught ReferenceError:graph未定义
声明一个新变量，并在d3.json回调函数中将graph分配给该变量。在
threshold
和
restart
函数中使用新变量。由于您有一个名为graphRec的全局变量和数据，您也可以在
阈值
和
重新启动
函数中使用它而不是图形。它会给出另一个错误
未捕获引用错误：未在函数
重新启动
中定义链接