d3.js - d3js 中弯头连接器的 M、V、H 是什么意思？-6ren

d3.js - d3js 中弯头连接器的 M、V、H 是什么意思？

转载作者：行者123 更新时间：2023-12-01 12:19:38

我目前正在使用 d3js 处理树形图。我的连接器目前是曲线，我正在努力将其转换为垂直线。我遇到了肘部功能，如下所示:

 function elbow(d, i) {  return "M" + d.source.y + "," + d.source.x
   + "H" + d.target.x + "V" + d.target.y
   + (d.target.children ? "" : "h" + margin.right);}

我的输出很有趣，所以我需要了解弯头连接器中使用的 M、H 和 V 是如何工作的？

我的整个代码如下 - 您也可以查看输出。

var sampleData = [
  {
    "ChangeFlowsFromParent": "false",
    "ChangeFlowsToParent": "false",
    "StreamType": "Mainline",
    "streamName": "ArgOS_2_0",
    "Parent": "none",
    "Compliance": "Released",
    "children": [
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_0_DHAL",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_0_Dev",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "true",
            "ChangeFlowsToParent": "true",
            "StreamType": "Release",
            "streamName": "r_ArgOS_0230",
            "Parent": "ArgOS_2_0_Dev",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_0_IPC-Tracer",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_0_NSW_Temp",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_0_Test",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_CBD",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2_CSGDK",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_2x_Dev",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_ION_DEV_wp",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "ArgOS_IPC",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_ASP",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_G2S",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_MGAM",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_MGAM2",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_NSW_TEMP",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_2_0_QUARTZ",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_DMG",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "true",
            "ChangeFlowsToParent": "true",
            "StreamType": "Development",
            "streamName": "d_ArgOS_DMG_PS",
            "Parent": "d_ArgOS_DMG",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_Lounge_Table",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_Prizm",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "true",
            "ChangeFlowsToParent": "true",
            "StreamType": "Development",
            "streamName": "Merge_mainline_into_prizm",
            "Parent": "d_ArgOS_Prizm",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_Prizm_Merge",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "d_ArgOS_QCOM",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0200",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "true",
            "ChangeFlowsToParent": "true",
            "StreamType": "Release",
            "streamName": "r_ArgOS_0200D",
            "Parent": "r_ArgOS_0200",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0200A",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0210",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0212",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "false",
            "ChangeFlowsToParent": "true",
            "StreamType": "Release",
            "streamName": "r_ArgOS_0211",
            "Parent": "r_ArgOS_0212",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0214",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "false",
            "ChangeFlowsToParent": "true",
            "StreamType": "Release",
            "streamName": "r_ArgOS_0213",
            "Parent": "r_ArgOS_0214",
            "Compliance": "Released",
            "children": [
              {
                "ChangeFlowsFromParent": "true",
                "ChangeFlowsToParent": "true",
                "StreamType": "Development",
                "streamName": "ArgOS_WindowManager",
                "Parent": "r_ArgOS_0213",
                "Compliance": "Released"
              },
              {
                "ChangeFlowsFromParent": "true",
                "ChangeFlowsToParent": "true",
                "StreamType": "Release",
                "streamName": "r_ArgOS_0215",
                "Parent": "r_ArgOS_0213",
                "Compliance": "Released"
              }
            ]
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0216",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0218",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      },
      {
        "ChangeFlowsFromParent": "false",
        "ChangeFlowsToParent": "true",
        "StreamType": "Release",
        "streamName": "r_ArgOS_0225",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released",
        "children": [
          {
            "ChangeFlowsFromParent": "false",
            "ChangeFlowsToParent": "true",
            "StreamType": "Release",
            "streamName": "r_ArgOS_0220",
            "Parent": "r_ArgOS_0225",
            "Compliance": "Released"
          }
        ]
      },
      {
        "ChangeFlowsFromParent": "true",
        "ChangeFlowsToParent": "true",
        "StreamType": "Development",
        "streamName": "test_mergewp",
        "Parent": "ArgOS_2_0",
        "Compliance": "Released"
      }
    ]
  }
]

// ************** Generate the tree diagram	 *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 1960 - margin.right - margin.left,
	height = 800 - margin.top - margin.bottom;
	
	   var viewerWidth = $(document).width();
    var viewerHeight = $(document).height();
	
var i = 0,
	duration = 750,
	root;

var tree = d3.layout.tree(); //draw tree with size of nodes specified
tree.nodeSize([150, 40]); 

tree.separation(function separation(a, b) {
  return (a.parent == b.parent ? 1 : 2) / a.depth;
});

	
var diagonal = d3.svg.diagonal().projection(function(d) { return [d.x-30, -d.y + 280]; });
	
var svg = d3.select("body").append("svg")
			.attr("width", width + margin.right + margin.left)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
    		//.attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
			.attr("transform", "translate(800,450)") 
			.on("click", clicksvg);
						
				
root = sampleData[0];

root.x0 = height / 2;
root.y0 = 0;

update(root);

<!-- d3.select(self.frameElement).style("height", "500px"); -->

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
	  links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
	  .data(nodes, function(d) { return d.id || (d.id = ++i); });
	  
	
  // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter() //all nodes should be inside g - only then text seems to appear
	  .append("g")
	  <!-- .attr("height", 40) -->
	  <!-- .attr("width", 100) -->
	  <!-- .style("fill","yellow") -->
	  .attr("class", "node")
	  .attr("transform", function(d) { return "translate(" +  source.y0 + "," + source.x0 + ")"; })
	  .on("click", click);

  nodeEnter.append("rect")
	  .attr("height", 40)
	  .attr("width", 100)
	  .style("fill", "lightsteelblue");

  nodeEnter.append("text")
	  .attr("x", "50" )
	  .attr("y", "50")
	  <!-- .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) -->
	  .text(function(d) { return d.streamName; })
	  .style("fill","black")
	 
	  <!-- .style("fill-opacity", 1e-6); -->

  // Transition nodes to their new position.
  
  
  var nodeUpdate = node.transition()
	  .duration(duration)
	  .attr("transform", function(d) { 
	  var negY = -d.y +280; 
	  return "translate(" + d.x + "," + negY + ")"; }
	  );

  nodeUpdate.select("rect")
	 .attr("height", 40)
	  .attr("width", 100)
	  .attr("x",-80)
	  .attr("y", 0)
	  .style("fill", function(d) {return d.Parent == "none" ? "yellow" : "skyblue"});
	 

  nodeUpdate.select("text")
	  .attr("x",-75)
	  .attr("dy", -25)
	   .style("font-weight",  "bold")
	  .style("fill-opacity", 1)
	  ;
  // Update the links…
  var link = svg.selectAll("path.link")
	  .data(links, function(d) { return d.target.id; });
	  

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
	  .attr("class","link")
	  .style("stroke", function(d){
	  <!-- console.log(d.target); -->
	  if(d.target.ChangeFlowsFromParent == "true") { return  "green" } else {return "red"}})
	  .attr("d", elbow);
	  <!-- .attr("d", function(d) { -->
	  <!-- var o = {x: source.y0, y: -source.x0}; -->
		<!-- return diagonal({source: o, target: o}); -->
	  <!-- }); -->
	  
  // Transition links to their new position.
  link.transition()
	  .duration(duration)
	  .attr("d", elbow);

	  // Stash the old positions for transition.
  nodes.forEach(function(d) {
	d.x0 = d.y;
	d.y0 = d.x;
  });
  
 }

// open children info as a pop-up on click.
function click(d) {

d3.event.stopPropagation();

d3.select("#foreign").remove();

var xcor = d.x0 - 30;
var ycor = d.y0;

var pop = d3.select(this)
			.append('g')
			//.attr("transform", function(d) { return "translate(" + (xcor - 300) + "," + 0 + ")"; })
			 .attr("id","foreign");

	pop.append("rect")
      .attr("height", 200)
	   .attr("width", 300)
	   .attr("x", -20)
	   .attr("y", -60)
	   .attr("fill","white")
	   .attr("stroke", "black");
	   
	 <!-- pop.append("text") -->
		<!-- .attr("x", 30) -->
	   <!-- .attr("dy", -40) -->
     <!-- .style("fill-opacity", 5) -->
     <!-- .attr("text-anchor", "middle") -->
  
  var foreign = pop.append("foreignObject").
                    attr("class","foreign");
  
  foreign.append("xhtml:div")
		.attr("height", 200)
	   .attr("width", 500)
         .html(function(d) {
                return "<span style='font-weight:bold'>StreamName: </span>" + d.streamName + "<br/>" +
              "<strong>ParentName: </strong> <span style='color:red'>" + d.Parent + "</span><br/>" +
              "<strong>Compliance: </strong> <span style='color:red'>" + d.Compliance + "</span><br/>";
              })
		}

function clicksvg() {
	var thisclick = this;
	thisclick.selectAll("#foreign").remove(); 
	 }  
	 
	 function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
       + "H" + d.target.x + "V" + d.target.y
       + (d.target.children ? "" : "h" + margin.right);
}

	.node {
		cursor: pointer;
		overflow:auto;
	}

	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text {
	  font: 12px sans-serif;
	}

	.linkFrom {
	  fill: none;
	  stroke: blue;
	  stroke-width: 2px;
	}
	
	.linkTo {
		fill: none;
	  stroke: red;
	  stroke-width: 2px;
	}
	
	.link{
	fill:none;
	stroke:  #CCC;
	stroke-width: 2px;
	}
	
	.popup rect{
		cursor: pointer;
		position: absolute;
        text-align: left;
        <!-- width: 100px; -->
        <!-- height: 80px; -->
        padding: 8px;
        font: 10px sans-serif;
        background-color: gray;
        border: solid 1px #aaa;
        border-radius: 8px;
	
	}
	
	.foreign{
	cursor: pointer;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>

最佳答案

这与D3无关。那些是 SVG path commands .

M命令:

"Move To" or M, takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places.

然后，H 和 V 命令:

H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.

关于d3.js - d3js 中弯头连接器的 M、V、H 是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45479867/

文章推荐： r - 听 shiny 中的 reactive() 失效？

文章推荐： java - 纹理区域分割不起作用

文章推荐： java - 让用户选择是否再次运行某个程序？

文章推荐： java - ArrayList 声明 - 设置未知大小

node.js - backbone.js + node.js - express.js
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之，我想将我的应用程序实现为单独的层，其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
node.js - Sequelize js/express js/node js 如何更改日期格式
当我看到存储在我的数据库中的日期时。这是正常。日期和时间就是这样。但是当我运行 get 请求来获取数据时。此格式与存储在数据库中的格式不同。为什么会发生这种情况？最佳答案我认为您可以将
history.js - Sammy.js/History.js/Nav.js 之间的比较
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
backbone.js - Mustache.js/Hogan.js 和 Backbone.js
我正在尝试使用backbone.js 实现一些代码和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
node.js - Backbone.js Node.js Express.js 中的用户功能
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序，并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
node.js - Angular.js/D3.js/Node.js 之间有什么区别和相似之处
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
node.js - d3.js、queue.js 和 node.js
我尝试在 NodeJS 中加载数据，然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
node.js - node.js 中 app.js、index.js 和 server.js 的约定？
在 node.js 中，我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时，会创建一个 app.js 文件作为生成应用的主要入口点。通过 n
backbone.js - amplify.js 和backbone.js
最近，我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。我更喜欢客户端。在他的实现过程中，papa先生在客户端有类
backbone.js - Mustache.js、Handlebars.js 和 Underscore.js 有什么区别？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
d3.js - Pixi.js vs Konva.js vs D3.js
我是一个图形新手，需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么，而我没有从 Konva 等基于 Canvas 的库中得到什么？我从 Konva
node.js - Ember.js:将选项传递给node.js
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
node.js - 尝试在 Express.js Node.js Passport.js 中查看所有登录用户
尝试查看 Express Passport 中所有登录用户的所有 session ，并希望能够查看当前登录的用户。最好和最快的方法是什么？我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
node.js - React.js 渲染完成后运行客户端 JS
我有一个 React 应用程序，但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载，运行与 DOM 交互的 js 的最佳方式是什么，例如 $('div').mixItUp() 。对
node.js - 使用 vue.js、node.js 和express.js 上传原始文件
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器客户端 // ... onFilePicked(file) { const url = 'upload/a
node.js - 由于 js 错误过多，Gulp.js 无法编译 angular.js 项目？
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好，所以我一定是在 Gulp 中做错了什么。除脚本外，所有其他任务均有效。我现在厌倦了添加和注释部分。我不断收到与意外
node.js - sails.js(使用 node.js 和 express.js)的标题或应用名称在哪里？
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。最佳答案您可以在 config/ 目录中创建任何文件，例如 config/app.js 包含如下内容: module.expor
node.js - 将 ember.js 与 node.js + express.js 结合使用
经过多年的服务器端 PHP/MySQL 开发，我正在尝试探索用于构建现代 Web 应用程序的新技术。我正在尝试对所有 JavaScript 内容进行排序，如果我理解得很好，一个有效的解决方案可以是服
node.js - Node.js 中 app.js 和 index.js 的区别
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
javascript - AngularJS 种子 : putting JavaScript into separate files (app. js、controllers.js、directives.js、filters.js、services.js)
我正在使用 angular-seed用于构建我的应用程序的模板。最初，我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - d3js 中弯头连接器的 M、V、H 是什么意思？