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

D3.js - force diagram. How to add zoom and pan

本文关键字：缩放 添加 力图 js- 何添加 D3      更新时间：2023-09-26

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);
    }

什么也没发生，代码可以工作，但缩放和平移不行。我错过了什么？

您需要使用.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/

相关文章：