[英]d3.js zoom+pan center changed
我正在學習d3.js,我找到了這個例子 。 我做了一些改變,沒什么特別的。 但是,我想為它添加一個縮放,這會帶來很多麻煩。
這是我到目前為止(代碼也可以在下面): https : //fiddle.jshell.net/4w65nbq9/3/
(參見我做過和想做的評論)
我正在使用這種方法來縮放和平移:
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")" + " scale(" + d3.event.scale + ")")}))
它工作得很好,但是當我第一次使用縮放或平移時,整個svg會回到(0,0)坐標。
我發現以下屬性負責首先將svg居中(請參閱我做或想做的更改的注釋):
.attr("transform", "translate(" + radius*1.5 + "," + radius + ")")
因此,當我進行縮放時,這部分代碼將無效,中心將變為(0,0)。
然后我使用了這個代碼片段,但把它放在svg的“Links”部分,它會使鏈接部分居中,而不是在縮放后錯誤地重新定位。
我現在要做的是以相同的方式使文本居中(它們是在“節點”部分生成的。有一個屬性可以生成每個文本的位置。
我的問題是如何將文本居中,以便縮放/平移正常工作,或者如何使svg不在(0,0)處重新定位。 如果這種縮放/面板方法不起作用,我應該使用哪一種(我想要無限縮放/縮放,而不是最大/最小)。
這是相同的代碼,但鏈接重新登記,文本不居中: https : //fiddle.jshell.net/hanjcupg/1/
下面的代碼已刪除其樣式以使其更短(請參閱注釋):
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var file = "https://gist.githubusercontent.com/mbostock/1044242/raw/8f22cf2264e1f6ec6cb233c4b49333fb8f75bb99/readme-flare-imports.json",
fileinternet = "https://gist.githubusercontent.com/mbostock/1044242/raw/8f22cf2264e1f6ec6cb233c4b49333fb8f75bb99/readme-flare-imports.json",
fileregular = "data.json",
isLineActive = false,
//originally 0.85
tension = 0.85,
//originally 960
diameter = 900,
radius = diameter / 2,
innerRadius = radius - 120;
var cluster = d3.layout.cluster()
.size([360, innerRadius])
.sort(null)
.value(function(d) { return d.size; });
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(tension)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var svg = d3.select("body").append("svg")
.attr("width", diameter*1.5)
.attr("height", diameter)
.attr("style", "outline: thin solid grey;")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g")
/*.attr("transform", "translate(" + radius*1.5 + "," + radius + ")")*/;
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
d3.json(file, function(error, classes) {
if (error) throw error;
var nodes = cluster.nodes(packageHierarchy(classes)),
links = packageImports(nodes);
link = link
.data(bundle(links))
.enter().append("path")
.each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
.attr("class", "link")
.attr("d", line)
//added the transform here to center the links
.attr("transform", "translate(" + radius*1.5 + "," + radius + ")");
node = node
.data(nodes.filter(function(n) { return !n.children; }))
.attr("transform", "translate(" + radius*1.5 + "," + radius + ")")
.enter().append("text")
.attr("class", "node")
.attr("dy", ".31em")
//I suppose this is where I need to change the transform to somehow center the nodes, but keep the way it's generated
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
.style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.text(function(d) { return d.key; })
.on("click", mouseovered);
});
function mouseovered(d) {
if (isLineActive) {
link
.classed("link--target", false)
.classed("link--source", false);
node
.classed("node--target", false)
.classed("node--source", false);
isLineActive = false;
}
else {
node
.each(function(n) { n.target = n.source = false; });
link
.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
.classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
.filter(function(l) { return l.target === d || l.source === d; })
.each(function() { this.parentNode.appendChild(this); });
node
.classed("node--target", function(n) { return n.target; })
.classed("node--source", function(n) { return n.source; });
}
}
function mouseouted(d) {
link
.classed("link--target", false)
.classed("link--source", false);
node
.classed("node--target", false)
.classed("node--source", false);
}
d3.select(self.frameElement).style("height", diameter + "px");
function packageHierarchy(classes) {
var map = {};
function find(name, data) {
var node = map[name], i;
if (!node) {
node = map[name] = data || {name: name, children: []};
if (name.length) {
node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
node.parent.children.push(node);
node.key = name.substring(i + 1);
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return map[""];
}
function packageImports(nodes) {
var map = {},
imports = [];
// Compute a map from name to node.
nodes.forEach(function(d) {
map[d.name] = d;
});
nodes.forEach(function(d) {
if (d.imports) d.imports.forEach(function(i) {
imports.push({source: map[d.name], target: map[i]});
});
});
return imports;
}
</script>
</body>
我發現了問題所在。 簡單的解決方案是在svg轉換之后添加額外的.append(g),如下所示:
var svg = d3.select("body").append("svg")
.attr("width", diameter*1.5)
.attr("height", diameter)
.attr("style", "outline: thin solid grey;")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g")
.attr("transform", "translate(" + radius*1.5 + "," + radius + ")")
//this is the part that I added.
.append("g")
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.