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

这方面也有类似的问题，但我只是不知道如何在我的案例中使用它。我正在尝试将缩放/平移功能添加到力图中。我对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);
    }

---

什么都没有发生，代码可以工作，但缩放和平移不能。我缺少什么？

您需要使用.append（'SVG:g'）向SVG追加一个组在声明SVG之后。不幸的是，当svg元素有子元素时，您不能直接将转换应用于svg元素（因为它们也需要缩放）

---

您可以在这里看到它的作用-您需要使用.append（'SVG:g'）将一个组附加到SVG中在声明SVG之后。不幸的是，当svg元素有子元素时，您不能直接将转换应用于svg元素（因为它们也需要缩放）

---

你可以在这里看到它的作用-可能的重复你看过这个演示吗？网上有很多可缩放的d3力图的例子…可能是重复的。你看过这个演示吗？网上有很多可缩放的d3力图的例子……这确实使它可以缩放和平移：）。但由于某些原因，将节点拖动到新位置将连接到“缩放”。在我抓取节点并将其移到新位置之前，但现在当我尝试这样做时，它会平移。你能看一下吗？啊，我明白了。我已经更新了小提琴，现在你可以在图表和单个节点上平移和缩放（见上面的答案）-这确实使它缩放和平移：）。但由于某些原因，将节点拖动到新位置将连接到“缩放”。在我抓取节点并将其移到新位置之前，但现在当我尝试这样做时，它会平移。你能看一下吗？啊，我明白了。我已经更新了小提琴，现在你可以在图表和单个节点上平移和缩放（见上面的答案）-

//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.drag().on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });