D3放大版本3

有關於如何實現使用D3在力圖中的平移和縮放堆棧溢出的幾個例子，但它們都使用D3版本2，而不是最新版本3D3放大版本3

對於例如，這裏是一個解決方案：http://jsfiddle.net/nrabinowitz/QMKm3/

但是，似乎在版本3中，在覈心svg上應用transform="translate(0,0) scale(0.5)"視圖似乎不起作用。

請原諒我的CoffeeScript，如果你不熟悉閱讀它：

height = null 
width = null 
svg = null 

resizeHandler = -> 
    height = $("#fcMiddle").height() 
    width = $("#fcMiddle").width() 
    console.log height+"x"+width 
    rerender() 

$(window).resize resizeHandler 

redraw = -> 
    #console.log "here", d3.event.translate, d3.event.scale 
    svg.attr "transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")" 

svg = d3.select("#fcMiddle").append("svg").attr("width", width).attr("height", height).attr("pointer-events", "all") 

rerender = -> 
    $("#fcMiddle svg").empty() 
    svg.append('svg:g').call(d3.behavior.zoom().on("zoom", redraw)).append('svg:g').append('svg:rect').attr('width', width).attr('height', height).attr('fill', 'white') 
    color = d3.scale.category20() 
    force = d3.layout.force().charge(-120).linkDistance(30).size([width, height]) 
    d3.json "/data/systems.json", (error, graph) -> 
    console.log graph 
    force.nodes(graph.nodes).links(graph.links).start() 
    link = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link").style("stroke-width", (d) -> 
     Math.sqrt d.value 
    ) 
    node = svg.selectAll(".node").data(graph.nodes).enter().append("circle").attr("class", "node").attr("r", 5).style("fill", (d) -> 
     color d.group 
    ).call(force.drag) 
    node.append("title").text (d) -> 
     d.name 

    force.on "tick", -> 
     link.attr("x1", (d) -> 
     d.source.x 
    ).attr("y1", (d) -> 
     d.source.y 
    ).attr("x2", (d) -> 
     d.target.x 
    ).attr "y2", (d) -> 
     d.target.y 

     node.attr("cx", (d) -> 
     d.x 
    ).attr "cy", (d) -> 
     d.y

這幾乎等同於在JavaScript here版本。如果窗口重新縮放，我會重新繪製所有內容，並且每次重新繪製所有內容時，我都會重新使用它的內容。這些東西不應該影響變焦的變換。

來源

2013-12-08 Christian Stewart

D3和SVG是獨立的，所以爲了將一個屬性（如'transform'）應用於SVG，使用哪個版本並不重要。據我所見，你發佈的代碼應該可以工作 - 當你說它不起作用時，你的意思是什麼？ –

@LarsKotthoff我看到應用於根'

你能發佈一個完整的例子來證明這個問題嗎？ –

當您將transform應用於元素時，請確保它不是svg元素 - transform ing，這將不起作用（有關更多信息，請參閱here）。但是，您可以在頂層添加g元素（即其他所有內容都會在其下面添加）和transform。

來源

2013-12-08 21:10:01

回答

相關問題