在d3部队布局中设置链接
Setting up links in d3 force layout
我正在尝试使用节点和链接设置d3力可视化。我的节点显示正常,但链接有一些问题。有人能看看我的json文件,然后看看我的代码,指导我完成显示链接的过程吗?
以下是json数据(链接的源和目标位于底部):
https://api.myjson.com/bins/4t8na
下面是可视化的代码:
<script type= "text/javascript">
var w = 1000,
h = 650;
var svg = d3.select("body").append("svg")
.attr("height", 0)
.attr("width", 0)
.style("border", "1px solid black");
var data; // a global
var force = d3.layout.force()
.size([w, h])
.linkDistance([150])
.charge([-1050])
.gravity(0.5)
.on("tick", tick);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll(".node");
d3.json("https://api.myjson.com/bins/1rnhq", function(error, json) {
if (error) return console.warn(error);
data = json;
var nodes = data;
console.log(data);
force.nodes(data)//.links()
.start();
// Update nodes.
circles = circles.data(data);
circles.exit().remove();
var nodeEnter = circles.enter().append("g")
.attr("class", "node")
.style("fill", "#000")
.style("opacity", 0.75)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.call(force.drag);
nodeEnter.append("circle")
.attr("r", function(d) { return d.sector == "Academia" ? 1:5 });
nodeEnter.attr("cursor", "pointer");
//Update links
var links = svg.selectAll(".link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", "1px");
links.exit().remove();
function mouseover() {
d3.select(this).select("circle").transition()
.duration(250)
.attr('r', 10);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(250)
.attr('r', 5);
}
nodeEnter.append("text")
.attr("text-anchor", "middle")
.style("font-size", ".75em")
.attr("dy", "-0.85em").text(function (d) { return d.name });
var tooltip = svg.append("rect")
.attr("x", 1000)
.attr("y", 0)
.attr("width", 900)
.attr("height", 700)
.attr("opacity", 0.85);
function click() {
d3.select(tooltip).transition()
.duration(450)
.attr("x", 650)
};
});
function tick() {
links.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; });
circles.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
};
// create svg nodes for each json object: "sector"
// create svg nodes for each json object: "name"
// load links.json
// create svg links from links json file
// style links
// sort json objects by projects
// get google map: coastal virginia
// sort json objects: "name" by geography
// get googe map U.S.
</script>
主要问题在JSON链接内部你有这样的值:
{"source":52,"target":28},{"source":52,"target":29},{"source":52,"target":30},{"source":52,"target":31}
但是没有索引为52的节点,因此所有内容都在加载时中断。然而,你的代码有很多其他错误,比如
circles.exit().remove();//this is incorrect coz circles in your case is not a selection
还有更多:)
此处的工作代码
希望这能有所帮助!
我认为问题是data.links
不存在,您拥有的是data[#].links
。因此,当您在var links = ...
上执行.data(data.links)
时,您将在那里传递一个undefined
属性。
试试这个:
var links = svg.selectAll(".link")
.data(data)
// ...
相关文章:
- 一点javascript元编程&可链接的设置器
- 这样链接时是否可以设置转换
- 导轨 4.宝石will_paginate.更改在 ajax 请求上设置的分页链接
- 当按下链接以在不同页面上的表单中的下拉列表中设置值时
- 如何通过Javascript启用链接按钮最初设置为Enable=false
- 如何根据两个不同的输入动态设置链接的路径
- 单击链接时设置cookie
- 如何将链接状态设置为在用户访问另一个页面之前保持
- 使用jQuery在表格单元格中设置链接
- 使用 JavaScript 通过更改链接的类属性来设置链接的样式
- 在javascript中设置链接的颜色
- 为楼梯效果设置链接切换动画
- 设置链接的请求标头
- 在d3部队布局中设置链接
- Rails 4:在 CoffeeScript 函数中设置链接目的地
- js -似乎不知道如何设置链接
- 使用自定义关键字在javascript中设置链接
- 如何设置链接以选中带有变量名称、id和值的复选框
- 如何在页面上设置#链接,但将目标与屏幕底部对齐
- 如何在我的图片上设置链接