D3js外部限制 [英] D3js outer limits
本文介绍了D3js外部限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用缩放监听器（scale）结合translate来适应所有节点，文本和路径到viewport / d3容器。
我使用树布局结合force布局。
有办法所有对象的外边界（围绕具有高度/宽度和X + y矩形的位置的对象的非现有矩形的类型）？
谢谢！
解决方案
我尝试了几种方法，试图解决这个问题。我尝试了getBoundingClientRect（）和getBBox（）通过D3但是没有给出正确的坐标。
所以我做的是循环遍历每个圆，并进入它的数据。我有一些逻辑来获得最低的左值，最高的正确值，最低的最高价值和最高的底部值。
为了做到这一点，我只是使用这个逻辑：
var thisNodeData = allNodes [i] .__ data__;
var thisLeft = thisNodeData.x;
var thisRight = thisNodeData.x;
var thisTop = thisNodeData.y;
var thisBottom = thisNodeData.y;
if（i == 0）{//将其放在第一个
left = thisLeft;
right = thisRight;
top = thisTop;
bottom = thisBottom;
};
//在需要的地方重写值
if（left> thisLeft）{
left = thisLeft
}
if（right< thisRight）{
right = thisRight
}
if（top> thisTop）{
top = thisTop
}
if（bottom< thisBottom）{
bottom = thisBottom
}
现在这些left，right，bottom和top值将是你的rect。然而，这种方式获得每个圆的中心点，以弥补这一点我组成一个半径值，但这可以编程找到：
所以我用这些创建如下的矩形：
var circleRadius = 20;
var rectAttr = [{
x：top - circleRadius / 2，
y：left - circleRadius / 2，
width：bottom - top + circleRadius，
height：right - left + circleRadius，
}]
，我搞砸了这些价值观。你会认为x
将被留下，y将是顶部，但这没有得到正确的结果。
如果任何人可以告诉我我在这里做错了，将
赞赏。但现在这个工作正常，它只是不像
正确的逻辑。
现在使用rectAttr创建边界矩形：
svg.selectAll（'rectangle'）
.data（rectAttr）
。 enter（）//.append('svg'）
.append（'rect'）
.attr（'x'，function（d）{
return dx;
}
.attr（'width'，function（d）{
b return d.width;
}）
.attr（'height'，function（d）{
return d.height;
}）
.style 'stroke'，'red'）。style（'fill'，'none'）
更新的小提琴： http://jsfiddle.net/thatOneGuy/JnNwu/916/
编辑：
现在根据大小缩放。
您必须在这里做的是获得新的
首先，我从矩形宽度和高度获得最大的值，以给出正确的缩放比例：
var testScale = Math.max（rectAttr [0] .width，rectAttr [0] .height）
var widthScale = width / testScale
var heightScale = height / testScale
var scale = Math.max（widthScale，heightScale）;
然后在翻译中使用这个比例。要放大矩形只需要得到中心点，并相应地调整它如下：
var transX = - （parseInt （d3.select（'＃invisRect'）。attr（x））+ parseInt（d3.select（'＃invisRect'）。attr（width））/ 2）* scale + width / 2;
var transY = - （parseInt（d3.select（'＃invisRect'）。attr（y））+ parseInt（d3.select（'＃invisRect'）。attr（height））/ 2 ）* scale + height / 2;
return'translate（'+ transX +'，'+ transY +'）scale（'+ scale +'）';
我也添加了这一行：
d3.select（'＃invisRect'）。remove（）;
在创建一个新的，否则我会得到错误的矩形，当得到上面的翻译维度。 / p>
最终工作小提琴： http：// jsfiddle。 net / thatOneGuy / JnNwu / 919 /
var json = { name：Base，children：[{name：Type A，children：[{name：Section 1，children：[{name： }，{name：第2节，children：[{name：Child 3}] }，{name：Type B，children：[{name：第1部分，children：[{name：Child 1}，{name：Child 2}，{name：Child 3}]}，{name：第2节，children：[{name：Child 1}，{name：Child 2}，{name：Child 3}]}]}] = 700; var height = 650; var maxLabel = 150; var duration = 500; var radius = 5; var i = 0; var root; var tree = d3.layout.tree（）.size（[height，width]） ; var diagonal = d3.svg.diagonal（）.projection（function（d）{return [dy，dx]; }; var svg = d3.select（body）。append（svg）.attr（width，width）.attr（height，height）.append（g）.attr transform;translate（+ maxLabel +，0））; root = json; root.x0 = height / 2; root.y0 = 0; root.children.forEach //计算新的树布局。 var nodes = tree.nodes（root）.reverse（）; var links = tree.links（nodes）; //规范化固定深度。 nodes.forEach（function（d）{d.y = d.depth * maxLabel;}）; //更新节点... var node = svg.selectAll（g.node）.data（nodes，function（d）{return d.id ||（d.id = ++ i）;}）; //在父级的上一个位置输入任何新的节点。 var nodeEnter = node.enter（）.append（g）.attr（class，node）.attr（transform，function（d）{returntranslate（+ source.y0 + + source.x0 +）;}）.on（click，click）; nodeEnter.append（circle）。attr（'class'，'circleNode'）.attr（r，0）.style（fill，function（d）{return d._children？lightsteelblue： white;}）; nodeEnter.append（text）.attr（x，function（d）{var spacing = computeRadius（d）+ 5; return d.children || d._children？-spacing：spacing;}）.attr dy，3）.attr（text-anchor，function（d）{return d.children || d._children？end：start;}）.text return d.name;}）.style（fill-opacity，0）; //将节点转换到新的位置。 var nodeUpdate = node.transition（）.duration（duration）.attr（transform，function（d）{returntranslate（+ d.y +，+ d.x +）; nodeUpdate.select（circle）.attr（r，function（d）{return computeRadius（d）;}）.style（fill，function（d）{return d._children？lightsteelblue： #fff;}）; nodeUpdate.select（text）。style（fill-opacity，1）; //转换退出节点到父的新位置。 var nodeExit = node.exit（）。transition（）.duration（duration）.attr（transform，function（d）{returntranslate（+ source.y +，+ source.x +） ; }） 。去掉（）; nodeExit.select（circle）。attr（r，0）; nodeExit.select（text）。style（fill-opacity，0）; //更新链接... var link = svg.selectAll（path.link）.data（links，function（d）{return d.target.id;}）; //在父级的上一个位置输入任何新的链接。 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 links to their new position。 link.transition（）.duration（duration）.attr（d，diagonal）; //转换退出节点到父的新位置。 link.exit（）。transition（）.duration（duration）.attr（d，function（d）{var o = {x：source.x，y：source.y}; return diagonal ，target：o}）;}）.remove（）; //存储转换的旧位置。 node.forEach（function（d）{d.x0 = dx; d.y0 = dy;}）;} function computeRadius（d）{if（d.children || d._children）return radius +（radius * nbEndNodes d）/ 10）; else return radius;} function nbEndNodes（n）{nb = 0; if（n.children）{n.children.forEach（function（c）{nb + = nbEndNodes（c）;}）; }; else if（n._children）{n._children.forEach（function（c）{nb + = nbEndNodes（c）;}）; } else nb ++; return nb;} function click（d）{if（d.children）{d._children = d.children; d.children = null; } else {d.children = d._children; d._children = null; } 更新）; getBoundingBox（）;} function collapse（d）{if（d.children）{d._children = d.children; d._children.forEach（collapse）; d.children = null; }} update（root）; getBoundingBox（）; function getBoundingBox（）{var left = 0，right = 0，top = 0，bottom = 0; var allNodes = document.getElementsByTagName（'circle'）; for（var i = 0; i html {font：10px sans-serif;} svg {border：1px solid silver;} node {cursor：pointer;}。中风：钢蓝stroke-width：1.5px;}。link {fill：none;中风stroke-width：1.5px;}
< script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< / script>< div id = tree>< / div>
I would like to use the zoom listener (scale) in combination with translate to fit all nodes, texts and paths nicely into the viewport/d3 container.
I'm using the tree layout in combination with the force layout.
Is there a way to get the outer limits of all objects (sort of non existing rectangle around the objects with height/width and X+y position of the rectangle)? This would then allow me to use translate/scale to fit everything nicely.
Thank you!
解决方案
I tried a few ways when trying to solve this. I tried getBoundingClientRect() and getBBox() through D3 but neither gave the correct coordinates.
So what I did was to loop through each circle and go into it's data. I had some logic to get the lowest left value, the highest right value, lowest top value and highest bottom value.
To do this I just used this logic :
var thisNodeData = allNodes[i].__data__;
var thisLeft = thisNodeData.x;
var thisRight = thisNodeData.x;
var thisTop = thisNodeData.y;
var thisBottom = thisNodeData.y;
if (i == 0) { //set it on first one
left = thisLeft;
right = thisRight;
top = thisTop;
bottom = thisBottom;
};
//overwrite values where needed
if (left > thisLeft) {
left = thisLeft
}
if (right < thisRight) {
right = thisRight
}
if (top > thisTop) {
top = thisTop
}
if (bottom < thisBottom) {
bottom = thisBottom
}
Now these left,right,bottom and top values will be the values of your rect. However, this way gets the centre points of each circle so to make up for this I made up a radius value but this can be found programatically :
So I used these to create a rectangle like so :
var circleRadius = 20;
var rectAttr = [{
x: top - circleRadius / 2,
y: left - circleRadius / 2,
width: bottom - top + circleRadius,
height: right - left + circleRadius,
}]
I must say, I messed about this these values. You would think that x would be left, y would be top but this didn't get the correct outcome. If anyone can tell me what I have done wrong here, will be appreciated. But for now this works fine, it just doesn't seem like the correct logic.
Now use rectAttr to create the boundary rectangle :
svg.selectAll('rectangle')
.data(rectAttr)
.enter() //.append('svg')
.append('rect')
.attr('x', function(d) {
return d.x;
})
.attr('y', function(d) {
return d.y;
})
.attr('width', function(d) {
return d.width;
})
.attr('height', function(d) {
return d.height;
})
.style('stroke', 'red').style('fill', 'none')
I have added this function to be called on click of a node so I can show you it working.
Updated fiddle : http://jsfiddle.net/thatOneGuy/JnNwu/916/
EDIT:
Now to zoom according to size.
What you have to do here is get the difference in scale of the new rect compared to the old.
First I got the biggest value from the rectangles width and height to give the correct scale like so :
var testScale = Math.max(rectAttr[0].width,rectAttr[0].height)
var widthScale = width/testScale
var heightScale = height/testScale
var scale = Math.max(widthScale,heightScale);
And then used this scale in the translate. To zoom into the rectangle only you have to get the center point and adjust it accordingly like so :
var transX = -(parseInt(d3.select('#invisRect').attr("x")) + parseInt(d3.select('#invisRect').attr("width"))/2) *scale + width/2;
var transY = -(parseInt(d3.select('#invisRect').attr("y")) + parseInt(d3.select('#invisRect').attr("height"))/2) *scale + height/2;
return 'translate(' + transX + ','+ transY + ')scale('+scale+')' ;
I also added this line :
d3.select('#invisRect').remove();
Before creating a new one otherwise I would be getting the wrong rectangle when getting the translate dimensions above.
Final working fiddle : http://jsfiddle.net/thatOneGuy/JnNwu/919/
var json = {
"name": "Base",
"children": [{
"name": "Type A",
"children": [{
"name": "Section 1",
"children": [{
"name": "Child 1"
}, {
"name": "Child 2"
}, {
"name": "Child 3"
}]
}, {
"name": "Section 2",
"children": [{
"name": "Child 1"
}, {
"name": "Child 2"
}, {
"name": "Child 3"
}]
}]
}, {
"name": "Type B",
"children": [{
"name": "Section 1",
"children": [{
"name": "Child 1"
}, {
"name": "Child 2"
}, {
"name": "Child 3"
}]
}, {
"name": "Section 2",
"children": [{
"name": "Child 1"
}, {
"name": "Child 2"
}, {
"name": "Child 3"
}]
}]
}]
};
var width = 700;
var height = 650;
var maxLabel = 150;
var duration = 500;
var radius = 5;
var i = 0;
var root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + maxLabel + ",0)");
root = json;
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
var links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * maxLabel;
});
// 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()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("circle").attr('class', 'circleNode')
.attr("r", 0)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "white";
});
nodeEnter.append("text")
.attr("x", function(d) {
var spacing = computeRadius(d) + 5;
return d.children || d._children ? -spacing : spacing;
})
.attr("dy", "3")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) {
return d.name;
})
.style("fill-opacity", 0);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
.attr("r", function(d) {
return computeRadius(d);
})
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text").style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("circle").attr("r", 0);
nodeExit.select("text").style("fill-opacity", 0);
// 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")
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
});
// 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.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
function computeRadius(d) {
if (d.children || d._children) return radius + (radius * nbEndNodes(d) / 10);
else return radius;
}
function nbEndNodes(n) {
nb = 0;
if (n.children) {
n.children.forEach(function(c) {
nb += nbEndNodes(c);
});
} else if (n._children) {
n._children.forEach(function(c) {
nb += nbEndNodes(c);
});
} else nb++;
return nb;
}
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
getBoundingBox();
}
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
update(root);
getBoundingBox();
function getBoundingBox() {
var left = 0,
right = 0,
top = 0,
bottom = 0;
var allNodes = document.getElementsByTagName('circle');
for (var i = 0; i < allNodes.length; i++) {
var thisNodeData = allNodes[i].__data__;
var thisLeft = thisNodeData.x;
var thisRight = thisNodeData.x;
var thisTop = thisNodeData.y;
var thisBottom = thisNodeData.y;
if (i == 0) { //set it on first one
left = thisLeft;
right = thisRight;
top = thisTop;
bottom = thisBottom;
};
//overwrite values where needed
if (left > thisLeft) {
left = thisLeft
}
if (right < thisRight) {
right = thisRight
}
if (top > thisTop) {
top = thisTop
}
if (bottom < thisBottom) {
bottom = thisBottom
}
}
var circleRadius = 20;
var rectAttr = [{
x: top - circleRadius / 2,
y: left - circleRadius / 2,
width: bottom - top + circleRadius,
height: right - left + circleRadius,
}]
d3.select('#invisRect').remove();
svg.selectAll('rectangle')
.data(rectAttr)
.enter() //.append('svg')
.append('rect').attr('id','invisRect')
.attr('x', function(d) {
return d.x;
})
.attr('y', function(d) {
return d.y;
})
.attr('width', function(d) {
return d.width;
})
.attr('height', function(d) {
return d.height;
})
.style('stroke', 'red').style('fill', 'none')
svg.attr('transform',function(d){
var testScale = Math.max(rectAttr[0].width,rectAttr[0].height)
var widthScale = width/testScale
var heightScale = height/testScale
var scale = Math.max(widthScale,heightScale);
var transX = -(parseInt(d3.select('#invisRect').attr("x")) + parseInt(d3.select('#invisRect').attr("width"))/2) *scale + width/2;
var transY = -(parseInt(d3.select('#invisRect').attr("y")) + parseInt(d3.select('#invisRect').attr("height"))/2) *scale + height/2;
return 'translate(' + transX + ','+ transY + ')scale('+scale+')' ;
})
}
html {
font: 10px sans-serif;
}
svg {
border: 1px solid silver;
}
.node {
cursor: pointer;
}
.node circle {
stroke: steelblue;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: lightgray;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id=tree></div>
这篇关于D3js外部限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
