在添加d3.behavior.zoom時，.on（「zoom」，zoom），zoom undefined

我有一段時間學習如何縮放。爲了學習，我一直在嘗試進行樹狀圖縮放。我正在使用這個jsfiddle示例（http://jsfiddle.net/6kEpp/1/）並嘗試將其應用於沒有摺疊節點的樹狀圖。我從Bostock的徑向樹形圖例子中取出了這個樹狀圖，並將它弄直。在添加d3.behavior.zoom時，.on（「zoom」，zoom），zoom undefined

我很抱歉添加整個腳本。

調試時，我被告知縮放未在「.on（」zoom「，zoom））;」中定義。我看過沒有定義變焦的例子。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.node circle { 
    fill: #fff; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.node { 
    font: 10px sans-serif; 
} 

.link { 
    fill: none; 
    stroke: #ccc; 
    stroke-width: 1.5px; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
    width = 2000 - margin.right - margin.left, 
    height = 2000 - margin.top - margin.bottom; 


var x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, height]) 
    .range([height, 0]); 

var tree = d3.layout.tree() 
    .size([height, width]) 
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2)/a.depth; }); 

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .call(d3.behavior.zoom() 
     .x(x) 
     .y(y) 
     .scaleExtent([1,8]) 
     .on("zoom", zoom)); 


d3.json("flare.json", function(error, root) { 
    var nodes = tree.nodes(root), 
     links = tree.links(nodes); 

    var link = svg.selectAll(".link") 
     .data(links) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", diagonal); 

    var node = svg.selectAll(".node") 
     .data(nodes) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

    node.append("circle") 
     .attr("r", 4.5); 

    node.append("text") 
     .attr("dy", ".31em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }); 

    // zoom in/out 
function zoom(d) { 
     var nodes = svg.selectAll(".node"); 
     nodes.attr("transform", transform); 

     // Update the links... 
     var link = svg.selectAll(".link"); 
     link.attr("d", translate); 

    } 

    function transform(d) { 
     return "translate(" + x(d.y) + "," + y(d.x) + ")"; 
    } 

    function translate(d) { 
     var sourceX = x(d.target.parent.y); 
     var sourceY = y(d.target.parent.x); 
     var targetX = x(d.target.y); 
     var targetY = (sourceX + targetX)/2; 
     var linkTargetY = y(d.target.x0); 
     var result = "M"+sourceX+","+sourceY+" C"+targetX+","+sourceY+" "+targetY+","+y(d.target.x0)+" "+targetX+","+linkTargetY+""; 
     //console.log(result); 

     return result; 
    } 
}); 

d3.select(self.frameElement).style("height", "800px"); 
     </script> 
    </body> 
</html>

來源

2013-04-18 Jakub Svec

你的功能zoom()功能d3.json()內部定義，因此你不能室外使用。

正如你可能需要使用內部d3.json()這個功能，我建議你也從這個函數內部稱之爲：

... 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 

d3.json("flare.json", function(error, root) { 
    svg.call(d3.behavior.zoom() 
     .x(x) 
     .y(y) 
     .scaleExtent([1,8]) 
     .on("zoom", zoom)); 
    var nodes = tree.nodes(root), 
     links = tree.links(nodes); 
    .... 
    function zoom(d){ ... } 
    ... 
}) 
...

來源

2013-04-19 00:43:53

<!DOCTYPE html> 
<html lang="en">

打開標籤需要，特別是如果你關閉</html>在你的腳本以後。試着改變你的javascript佈局，把你的function zoom(d)放在最前面，這樣變量定義可以依賴它，如果調用縮放。還記得，如果你在一個函數指定一個像(d)你需要調用它同樣

var d = ;// ?? 

..().().().on("zoom", zoom(d)));

另行指定做什麼，如果d不是在函數調用給定的值。你可以要求你的函數現有d像

function zoom(){ 
    var d=arguments[0] || 'bar'; 
    console.log(d); 
} 
zoom('foo'); // 'foo' 
zoom(); // 'bar'

來源

2013-04-18 23:16:23

在添加d3.behavior.zoom時，.on（「zoom」，zoom），zoom undefined

回答

相關問題