Question

Stack Overflow上有一些关于如何使用D3实现平移和放大力图的示例，但它们都使用D3版本2，而不是最新的版本3.

例如，这是一个解决方案：http://jsfiddle.net/nrabinowitz/QMKm3/

但是，似乎在版本3中，在核心transform="translate(0,0) scale(0.5)"视图上应用svg似乎不起作用。

如果你不熟悉它，请原谅我的咖啡因：

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中的版本完全相同。如果窗口重新调整，我会重绘所有内容，并且每次重新绘制所有内容时都会重复使用清除内容。这些东西不应该影响变焦的转换。

Answer 1

当您将transform应用于元素时，请确保不是svg元素 - transform不会产生影响（请参阅here欲获得更多信息）。但是，您可以在顶层添加g元素（即在其下方添加其他所有内容）和transform。

D3放大版本3

1 个答案: