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

D3放大版本3

回答

相关问题