D3js外部限制 [英] D3js outer limits
问题描述
我想使用缩放监听器(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屋!