javascript - D3.js - 力图。如何添加缩放和平移

Question

SO上有类似的问题，但我根本不知道如何在我的情况下使用它。我正在尝试向力图添加缩放/平移功能。我对 D3.js 的了解很基础，请原谅我的愚蠢问题。

这是原来的fiddle从这里website .

还有这个fiddle是我尝试添加缩放功能。

我添加了这段代码:

  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

声明 SVG 后，您需要使用 .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/