D3 布局树未呈现
D3 layout tree is not rendering
我不知道为什么 D3 布局树没有呈现。我想及时在页面正文中呈现 D3 布局。我尝试同时呈现"body"或 Div,但没有呈现。请建议?在我这边需要做什么。
下面是编辑后的代码
var treeData = {
name: "/",
contents: [
{
name: "Applications",
contents: [
{ name: "Mail.app" },
{ name: "iPhoto.app" },
{ name: "Keynote.app" },
{ name: "iTunes.app" },
{ name: "XCode.app" },
{ name: "Numbers.app" },
{ name: "Pages.app" }
]
},
{
name: "System",
contents: []
},
{
name: "Library",
contents: [
{
name: "Application Support",
contents: [
{ name: "Adobe" },
{ name: "Apple" },
{ name: "Google" },
{ name: "Microsoft" }
]
},
{
name: "Languages",
contents: [
{ name: "Ruby" },
{ name: "Python" },
{ name: "Javascript" },
{ name: "C#" }
]
},
{
name: "Developer",
contents: [
{ name: "4.2" },
{ name: "4.3" },
{ name: "5.0" },
{ name: "Documentation" }
]
}
]
},
{
name: "opt",
contents: []
},
{
name: "Users",
contents: [
{ name: "pavanpodila" },
{ name: "admin" },
{ name: "test-user" }
]
}
]
};
var height = 300;
var width = 300;
var diameter = 960;
var tree = d3.layout.tree()
.sort(null)
.size([height, width - 120])
.children(function (d) {
return (!d.contents || d.contents.length === 0) ? null : d.contents;
});
var nodes = tree.nodes(treeData);
var links = tree.links(nodes);
var svg = d3.select("#pie_chart_1").append("svg")
.attr("width", diameter)
.attr("height", diameter - 150)
.append("g")
.attr("transform", "translate(" + diameter / 2 + ",50)");
var link = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
layoutRoot.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", link);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", link);
var nodeGroup = layoutRoot.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeGroup.append("circle")
.attr("class", "node-dot")
.attr("r", options.nodeRadius);
nodeGroup.append("text")
.attr("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.attr("dx", function (d) {
var gap = 2 * options.nodeRadius;
return d.children ? -gap : gap;
})
.attr("dy", 3)
.text(function (d) {
return d.name;
});
}
您当前的(给定)代码有几个问题:
- 必须删除最后一个
}
。 -
layoutRoot
未定义,可能应该svg
-
options
是未定义的(但这可能只是代码中缺少的部分)。
这是一个工作小提琴。
实际上,您应该能够通过使用控制台并解决显示的问题来解决所有这些问题。
相关文章:
- 在链接d3强制布局中添加和删除类
- 如何在d3力布局中使直线而不是曲线
- 具有树状布局,如何更改X轴以使用D3中的时间刻度
- d3.js绘制具有固定布局的网络
- 可以't去除D3'的放射状树状布局
- 如何使d3.js树布局按字母顺序对节点进行排序
- D3.js强制布局带有外部数据的图形空白
- d3.js:在强制布局中使用缩放时,将禁用拖动
- 是否有类似强制布局但支持单击事件的 D3 布局引擎
- D3 筛选返回函数值强制布局
- 如何在 D3 中使力布局图.js响应屏幕/浏览器大小
- d3.js - 强制布局和节点位置
- D3 力导向布局的基础知识
- 如何在D3中获得可缩放Icicle布局中文本标签的旋转
- d3.js力布局图:如何从头开始构建nodes对象
- D3.js强制布局:动态添加节点;t随图的其余部分移动
- 在Hobbelt's”;组/束节点”;D3力布局示例
- 在强制布局 D3.js 中保持节点之间的动态链接距离
- 如何在我的力布局 D3 中停止标签交互
- 在一个特定的力布局D3中标记节点的问题