带有D3.Js的SVG高度 [英] SVG height with D3.Js
本文介绍了带有D3.Js的SVG高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个小问题，实际上我得到了许多树木，它们并排水平排列，问题是当三棵树的高度不同时，它们没有正确地水平排列.请帮助我找到解决方案，谢谢！ :)
I got a little problem, i got actually many tree's who are aligned side by side horizontaly, the problem is when the three's have a different height, they are not aligned horizontaly correctly. Help me please to find a solution, thanks ! :)
代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node rect {
cursor: pointer;
fill: #fff;
fill-opacity: 0.5;
stroke: #3182bd;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
pointer-events: none;
}
.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 20},
width = 400,
barHeight = 20,
barWidth = (width - margin.left - margin.right) * 0.8;
var i = 0,
duration = 0,
root,
root2;
var diagonal = d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; });
var div = d3.select("body").append("div")
.attr("id", "div")
.attr("width", 1920);
var svg = div.append("svg")
.attr("id", "svg")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30,30)");
var svg2 = div.append("svg")
.attr("id", "svg2")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30,30)");
var svg3 = div.append("svg")
.attr("id", "svg3")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30 30)");
d3.json("c.json", function(error, json) {
if (error) throw error;
root = d3.hierarchy(json);
root.x0 = 0;
root.y0 = 0;
update(root, svg, "svg");
});
d3.json("D.json", function(error, json) {
if (error) throw error;
root = d3.hierarchy(json);
root.x0 = 0;
root.y0 = 0;
update(root, svg2, "svg2");
});
d3.json("c.json", function(error, json) {
if (error) throw error;
root = d3.hierarchy(json);
root.x0 = 0;
root.y0 = 0;
update(root, svg3, "svg3");
});
function update(source, svg_var, svg_name) {
// Compute the flattened node list.
var nodes = source.descendants();
var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);
document.getElementById(svg_name).setAttribute("height", height);
d3.select(self.frameElement).transition()
.duration(duration)
.style("height", height + "px");
// Compute the "layout". TODO https://github.com/d3/d3-hierarchy/issues/67
var index = -1;
source.eachBefore(function(n) {
n.x = ++index * barHeight;
n.y = n.depth * 20;
});
// Update the nodes…
var node = svg_var.selectAll(".node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.style("opacity", 0);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", function(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(source, svg_var, svg_name);
});
nodeEnter.append("text")
.attr("dy", 3.5)
.attr("dx", 5.5)
.text(function(d) { return d.data.attributes; });
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("rect")
.style("fill", color);
// Transition exiting nodes to the parent's new position.
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 0)
.remove();
// Update the links…
var link = svg_var.selectAll(".link")
.data(root.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")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
root.each(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});*/
}
function color(d) {
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
</script>
D.json文件:
{"attributes": "DPGF", "children": [{"attributes": "LOT: nom 13.CVC", "children": [{"attributes": "Tous_DPGF: Profondeur 1", "children": [{"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 0.0"}, {"attributes":"Fin_poste_Excel 19.0"}, {"attributes":"Mot_cle debut"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 20.0"}, {"attributes":"Fin_poste_Excel 20.0"}, {"attributes":"Mot_cle chauffage"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 21.0"}, {"attributes":"Fin_poste_Excel 23.0"}, {"attributes":"Mot_cle Préambule"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 24.0"}, {"attributes":"Fin_poste_Excel 25.0"}, {"attributes":"Mot_cle Préambule"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 26.0"}, {"attributes":"Fin_poste_Excel 27.0"}, {"attributes":"Mot_cle production thermique"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 28.0"}, {"attributes":"Fin_poste_Excel 65.0"}, {"attributes":"Mot_cle chauffage"}, {"attributes":"Rang Rang 1"}, {"attributes": "Tous_DPGF: Profondeur 2", "children": [{"attributes": "Poste: Rang Rang 2", "children": [{"attributes":"Debut_poste_Excel 31.0"}, {"attributes":"Fin_poste_Excel 65.0"}, {"attributes":"Mot_cle Échangeur"}, {"attributes":"Rang Rang 2"}, {"attributes": "Tous_DPGF: Profondeur 3", "children": [{"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 35.0"}, {"attributes":"Fin_poste_Excel 35.0"}, {"attributes":"Mot_cle Manchon"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 36.0"}, {"attributes":"Fin_poste_Excel 36.0"}, {"attributes":"Mot_cle Vanne"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 37.0"}, {"attributes":"Fin_poste_Excel 37.0"}, {"attributes":"Mot_cle Thermomètre"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 38.0"}, {"attributes":"Fin_poste_Excel 38.0"}, {"attributes":"Mot_cle Sonde"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 39.0"}, {"attributes":"Fin_poste_Excel 39.0"}, {"attributes":"Mot_cle Soupape"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 40.0"}, {"attributes":"Fin_poste_Excel 41.0"}, {"attributes":"Mot_cle Pressostat"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste: Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 42.0"}]}]}]}]}]}]}]}]}
c.json文件:
{"attributes": "OUI", "children": [{"attributes": "LOT: nom 13.CVC", "children": [{"attributes": "Tous_DPGF: Profondeur 1", "children": [{"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 0.0"}, {"attributes":"Fin_poste_Excel 19.0"}, {"attributes":"Mot_cle debut"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste: Rang Rang 1", "children": [{"attributes":"Debut_poste_Excel 20.0"}, {"attributes":"Fin_poste_Excel 20.0"}, {"attributes":"Mot_cle chauffage"}, {"attributes":"Rang Rang 1"}]}]}]}]}
尝试在浏览器的deboguer中调整两个c_file的svg-height的大小，以查看我等待的最终结果，因此我们可以看到较长的SVG(具有最大的高度)从顶部开始页面的顶部，其他svg从底部开始，但我需要它们全部从页面顶部开始.再次感谢您的帮助，对不起我的英语;)
Try to resize the svg-height of the two c_file in the deboguer of your browser to see the final result that i'm waiting for, so we can see that the longer SVG (with the biggest height) start at the top of the page, and the others svg start at the bottom, but i need them all to start at the top of the page. Thanks you again for your help and sorry for my english ;)
推荐答案
我找到了以下解决方案
var cell;
var div = d3.select("body").append("div")
.attr("id", "div")
.attr("width", 1920);
cell = div.append("div").attr("class", "cell")
var svg = cell.append("svg")
.attr("id", "svg")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30,30)");
cell = div.append("div").attr("class", "cell")
var svg2 = cell.append("svg")
.attr("id", "svg2")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30,30)");
cell = div.append("div").attr("class", "cell")
var svg3 = cell.append("svg")
.attr("id", "svg3")
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(30 30)");
还有一些CSS
#div { display: table-row; }
#div .cell { display: table-cell; vertical-align: top;}
您的代码将无法运行，因为未定义root并且您无法从中获取links.
Your code will not run because root is undefined and you can't get links from it.
这篇关于带有D3.Js的SVG高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
