0
私は現在、d3jsを使ってツリーグラフを作成しています。私のコネクタは現在曲線ですが、私はそれを縦線に変換しようとしています。私は以下のように肘機能に出くわした：d3jsではエルボーコネクターのM、V、Hはどういう意味ですか？
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は肘コネクタ作品に使用方法を理解する必要がありますか？
私のコード全体は以下の通りです。あなたも出力を見ることができます。 D3とは何の関係もありません
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 \t *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
\t width = 1960 - margin.right - margin.left,
\t height = 800 - margin.top - margin.bottom;
\t
\t var viewerWidth = $(document).width();
var viewerHeight = $(document).height();
\t
var i = 0,
\t duration = 750,
\t 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;
});
\t
var diagonal = d3.svg.diagonal().projection(function(d) { return [d.x-30, -d.y + 280]; });
\t
var svg = d3.select("body").append("svg")
\t \t \t .attr("width", width + margin.right + margin.left)
\t \t \t .attr("height", height + margin.top + margin.bottom)
\t \t \t .append("g")
\t \t //.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
\t \t \t .attr("transform", "translate(800,450)")
\t \t \t .on("click", clicksvg);
\t \t \t \t \t \t
\t \t \t \t
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(),
\t 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")
\t .data(nodes, function(d) { return d.id || (d.id = ++i); });
\t
\t
// 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
\t .append("g")
\t <!-- .attr("height", 40) -->
\t <!-- .attr("width", 100) -->
\t <!-- .style("fill","yellow") -->
\t .attr("class", "node")
\t .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
\t .on("click", click);
nodeEnter.append("rect")
\t .attr("height", 40)
\t .attr("width", 100)
\t .style("fill", "lightsteelblue");
nodeEnter.append("text")
\t .attr("x", "50")
\t .attr("y", "50")
\t <!-- .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) -->
\t .text(function(d) { return d.streamName; })
\t .style("fill","black")
\t
\t <!-- .style("fill-opacity", 1e-6); -->
// Transition nodes to their new position.
var nodeUpdate = node.transition()
\t .duration(duration)
\t .attr("transform", function(d) {
\t var negY = -d.y +280;
\t return "translate(" + d.x + "," + negY + ")"; }
\t );
nodeUpdate.select("rect")
\t .attr("height", 40)
\t .attr("width", 100)
\t .attr("x",-80)
\t .attr("y", 0)
\t .style("fill", function(d) {return d.Parent == "none" ? "yellow" : "skyblue"});
\t
nodeUpdate.select("text")
\t .attr("x",-75)
\t .attr("dy", -25)
\t .style("font-weight", "bold")
\t .style("fill-opacity", 1)
\t ;
// Update the links…
var link = svg.selectAll("path.link")
\t .data(links, function(d) { return d.target.id; });
\t
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
\t .attr("class","link")
\t .style("stroke", function(d){
\t <!-- console.log(d.target); -->
\t if(d.target.ChangeFlowsFromParent == "true") { return "green" } else {return "red"}})
\t .attr("d", elbow);
\t <!-- .attr("d", function(d) { -->
\t <!-- var o = {x: source.y0, y: -source.x0}; -->
\t \t <!-- return diagonal({source: o, target: o}); -->
\t <!-- }); -->
\t
// Transition links to their new position.
link.transition()
\t .duration(duration)
\t .attr("d", elbow);
\t // Stash the old positions for transition.
nodes.forEach(function(d) {
\t d.x0 = d.y;
\t 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)
\t \t \t .append('g')
\t \t \t //.attr("transform", function(d) { return "translate(" + (xcor - 300) + "," + 0 + ")"; })
\t \t \t .attr("id","foreign");
\t pop.append("rect")
.attr("height", 200)
\t .attr("width", 300)
\t .attr("x", -20)
\t .attr("y", -60)
\t .attr("fill","white")
\t .attr("stroke", "black");
\t
\t <!-- pop.append("text") -->
\t \t <!-- .attr("x", 30) -->
\t <!-- .attr("dy", -40) -->
<!-- .style("fill-opacity", 5) -->
<!-- .attr("text-anchor", "middle") -->
var foreign = pop.append("foreignObject").
attr("class","foreign");
foreign.append("xhtml:div")
\t \t .attr("height", 200)
\t .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/>";
})
\t \t }
function clicksvg() {
\t var thisclick = this;
\t thisclick.selectAll("#foreign").remove();
\t }
\t
\t 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);
}
\t\t .node {
\t \t cursor: pointer;
\t \t overflow:auto;
\t }
\t .node circle {
\t fill: #fff;
\t stroke: steelblue;
\t stroke-width: 3px;
\t }
\t .node text {
\t font: 12px sans-serif;
\t }
\t .linkFrom {
\t fill: none;
\t stroke: blue;
\t stroke-width: 2px;
\t }
\t
\t .linkTo {
\t \t fill: none;
\t stroke: red;
\t stroke-width: 2px;
\t }
\t
\t .link{
\t fill:none;
\t stroke: #CCC;
\t stroke-width: 2px;
\t }
\t
\t .popup rect{
\t \t cursor: pointer;
\t \t 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;
\t
\t }
\t
\t .foreign{
\t cursor: pointer;
\t }<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>