D3.js V4强制有向图缩放

Question

I'm new to D3 and am simply experimenting with its capabilities. 我是D3的新手，只是在尝试其功能。 Forgive me if this has already been covered but I cannot seem to find a way to implement zoom onto my D3.js v4 forced-directed graph. 原谅我，如果这已经被解决了，但是我似乎找不到找到对我的D3.js v4强制定向图形进行缩放的方法。 My code is as below. 我的代码如下。

Any help with this would be greatly appreciated 任何帮助，将不胜感激

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
 stroke: #999;
 stroke-opacity: 0.6;
}

.nodes circle {
 stroke: #fff;
 stroke-width: 1.5px;
}

</style>
<div class="centre jumbotron">
 <h1> Title </h1>
  <h2>
   This is the home page
  </h2>
</div>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));

d3.json("network_data#all", function(error, graph) {
 if (error) throw error;

 var link = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

 var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

 node.append("title")
  .text(function(d) { return d.id; });

 simulation
  .nodes(graph.nodes)
  .on("tick", ticked);

 simulation.force("link")
  .links(graph.links);

 function ticked() {
  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; });
   }
  });

 function dragstarted(d) {
   if (!d3.event.active) simulation.alphaTarget(0.3).restart();
   d.fx = d.x;
   d.fy = d.y;
 }

 function dragged(d) {
   d.fx = d3.event.x;
   d.fy = d3.event.y;
 }

 function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
   d.fx = null;
   d.fy = null;
 }

 </script>

Answer 1

It's pretty straight-forward and demonstrated here . 这很简单，在此进行了演示。 It's doesn't really matter that you have a force-simulation, the steps are the same. 进行力仿真并不重要，步骤相同。

Here's it integrated into you sample code: 这是集成到您的示例代码中的：

 <!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <div class="centre jumbotron"> <h1> Title </h1> <h2> This is the home page </h2> </div> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); svg.append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .call(d3.zoom() .scaleExtent([1 / 2, 4]) .on("zoom", zoomed)); var g = svg.append("g"); function zoomed() { g.attr("transform", d3.event.transform); } var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); d3.json("https://jsonblob.com/api/6e520635-d35c-11e6-b16a-6b255c15b1a3", function(error, graph) { if (error) throw error; var link = g.append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .enter().append("line") .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = g.append("g") .attr("class", "nodes") .selectAll("circle") .data(graph.nodes) .enter().append("circle") .attr("r", 5) .attr("fill", function(d) { return color(d.group); }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); node.append("title") .text(function(d) { return d.id; }); simulation .nodes(graph.nodes) .on("tick", ticked); simulation.force("link") .links(graph.links); function ticked() { 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 dx; }) .attr("cy", function(d) { return dy; }); } }); function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } </script>

D3.js V4强制有向图缩放

问题描述

1 个解决方案

解决方案1
5 已采纳 2017-01-05 15:43:17

D3.js V4强制有向图缩放

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-01-05 15:43:17

解决方案1
5 已采纳 2017-01-05 15:43:17