D3.js-力圖。 如何添加縮放和平移

Question

SO上也有類似的問題，但是我根本不知道該如何使用它。 我正在嘗試向力圖添加縮放/平移功能。 我對D3.js的了解是基礎知識，請原諒我這個愚蠢的問題。

這是該網站的原始擺弄 。

而這個小提琴是我嘗試添加縮放功能的嘗試。

我添加了以下代碼：

  var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);


function zoomed() {
      container.attr("transform", "translate(" + d3.event.translate +
     ")scale(" + d3.event.scale + ")");
    }

    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();

      d3.select(this).classed("dragging", true);
      force.start();
    }

    function dragged(d) {

      d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = 
     d3.event.y);

    }

    function dragended(d) {

      d3.select(this).classed("dragging", false);
    }

而且什么也沒有發生，代碼有效，但是縮放和平移無效。 我想念什么？

Answer 1

您需要使用.append（'svg：g'）;將一組附加到SVG 。 在聲明您的SVG之后。 不幸的是，當svg元素具有子元素時，您不能直接將其應用於它（因為它們也需要縮放）。

您可以在這里看到它的運行狀態-http://jsfiddle.net/s7aLv276/ <- 新版本

//Append a SVG to the body of the html page. Assign this SVG as an object to svg
    var svg = d3.select('body').append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(zoom)
      .append('svg:g'); // <- Add your group so you can transform all elements together

整個代碼：

 //Constants for the SVG
var width = 500,
  height = 500;

//Set up the colour scale
var color = d3.scale.category20();

//Set up the force layout
var force = d3.layout.force()
  .charge(-120)
  .linkDistance(80)
  .size([width, height]);

var zoom = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select('body').append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(zoom)
  .append('svg:g');


//Read the data from the mis element 
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);

force.drag().on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
  .links(graph.links)
  .start();


//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("marker-end", "url(#suit)") //Added 
;

//Do the same with the circles for the nodes - no 
var node = svg.selectAll(".node")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 8)
  .style("fill", function(d) {
    return color(d.group);
  })
  .call(force.drag);

function zoomed() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();

  d3.select(this).classed("dragging", true);
  force.start();
}

function dragged(d) {

  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);

}

function dragended(d) {

  d3.select(this).classed("dragging", false);
}

//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function() {
  link.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

  node.attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    });
});

//---Insert-------
svg.append("defs").selectAll("marker")
  .data(["suit", "licensing", "resolved"])
  .enter().append("marker")
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 25)
  .attr("refY", 0)
  .attr("markerWidth", 6)
  .attr("markerHeight", 6)
  .attr("orient", "auto")
  .append("path")
  .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
  .style("stroke", "#4679BD")
  .style("opacity", "0.6");
//---End Insert---

---

*更新為在節點上添加平移/縮放*

好像我們沒有在Force對象上附加拖動處理程序。 我添加了以下行：

force.drag().on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

該圖現在應允許您拖動單個節點，以及平移和縮放整個圖。

實際觀看-http://jsfiddle.net/s7aLv276/