关于transform.parent与transform.root的不同意义

加粗样式
最近一直不知道官方说明的transform.root返回层次最高的变换是什么意思,所以找了一些资料终于搞明白了。
首先假如有A,B,C三个不同脚本,分别挂载在下面的假设条件下:

1.假设你在场景中新建了个GameObject(假设名字叫RootObject),在上面挂了个脚本C。
2. 然后在这个物体下面又新建了个GameObject,假设叫ChildObject1_1,并在ChildObject1_1上挂了脚本B
3. 然后又在ChildObject1_1下面新建了个GameObject,假设叫ChildObject2_1,并在ChildObject2_1上挂了脚本A。
[*] parent表示(所在物体)上一级的变换(transform),root表示(所在物体)层次最高的变换。
那么对于A来说,transform.parent就是ChildObject1_1;而A的transform.root是RootObject。
对于B来说,transform.parent是RootObject;B的transform.root是RootObject。
对于C来说,transform.parent是null;C的transform.root是RootObject(他自己)。
其实,parent和root相当于是一个目录一样的关系,root是根目录,parent是父目录。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我来回答你关于 Vue 和 D3.js 结合实现树形图的问题。 首先,需要安装 D3.js 库和 Vue.js 库。可以通过 npm 命令进行安装,如下所示: ``` npm install d3 vue ``` 接下来,创建一个 Vue 组件,在其中引入 D3.js 库。在组件的 mounted 钩子函数中,可以使用 D3.js 创建树形图。 具体实现步骤如下: 1. 在 Vue 组件中引入 D3.js 库 ```javascript import * as d3 from 'd3'; ``` 2. 在 mounted 钩子函数中创建树形图 ```javascript mounted() { const data = { name: "root", children: [ { name: "child1", children: [ { name: "child1.1" }, { name: "child1.2" } ] }, { name: "child2", children: [ { name: "child2.1" }, { name: "child2.2" } ] } ] }; const margin = { top: 10, right: 120, bottom: 10, left: 40 }; const width = 960 - margin.width - margin.left; const height = 500 - margin.top - margin.bottom; const root = d3.hierarchy(data); root.dx = 10; root.dy = width / (root.height + 1); d3.tree().nodeSize([root.dx, root.dy])(root); const svg = d3.select("#tree") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const link = svg.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", d => { return "M" + d.y + "," + d.x + "C" + (d.y + d.parent.y) / 2 + "," + d.x + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x; }); const node = svg.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf")) .attr("transform", d => "translate(" + d.y + "," + d.x + ")"); node.append("circle") .attr("r", 2.5); node.append("text") .attr("dy", 3) .attr("x", d => d.children ? -6 : 6) .style("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name); } ``` 3. 在组件的模板中添加 SVG 元素 ```html <template> <svg id="tree"></svg> </template> ``` 这样就实现了一个简单的树形图。你可以根据自己的需求,对节点和链接进行样式等方面的修改。 希望这个例子能够对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值