1

我一直在尝试实现 D3 力有向图函数来为我的数据提供可视化表示，到目前为止，我已经成功地让节点显示在屏幕上并使各个节点可拖动，但是我没有成功让整个网络平移和缩放。

我在网上看了无数的例子，但还没有真正弄清楚我做错了什么。

有人可以指出我正确的方向吗，使用 d3 版本 4

function selectableForceDirectedGraph(){

var width = d3.select('svg').attr('width');
var height = d3.select('svg').attr('height');

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

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

var container = svg.append("g")
.on("zoom",zoomed)
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended);

var json_nodes = _dict['one']['nodes'];
var json_links = _dict['one']['links'];

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

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(json_links)
    .enter().append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
    .style("marker-end","url(#suit)");

  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(json_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(json_nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(json_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;
}

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

调用此函数的 HTML 文档已实例化了 SVG（因此选择了 SVG，而不是像大多数其他示例一样附加）

“json_nodes”和“json_links”这两个变量从文本文件中获取格式化的节点和链接（就像您在 JSON 文件中看到的那样）并将它们作为数据传递（想离线执行此操作，所以当我去海外时）。数据的格式如下：

节点：[{“id”：“名称”，“组”：整数}，...]，

链接：[{“源”：“名称”，“目标”：“名称”，“值”：整数}，...]

如果这是一个重复的问题，我深表歉意，我无法找到任何真正直观的帮助。

4

1 回答 1

1

在紧张地盯着屏幕几个小时之后，我意识到了一些小技巧可以让我的应用程序更容易理解并且更不容易出错。

从我的上一个示例中可以看出，当包含 D3 .zoom() 方法的缩放变量未添加到链接变量时（正如我在下面指出的那样），我试图执行缩放功能。完成此操作后，一切正常。

我还添加了一些注释，以提高原始问题中代码的可读性，这些更改使其更容易理解并且更容易构建（很像我熟悉的 python 类的继承） .

所以希望我的小挫折对将来的某人有用，直到下一个问题，愉快的调试:)

无能先生

function selectableForceDirectedGraph(){

var width = d3.select('svg').attr('width');
var height = d3.select('svg').attr('height');

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

//As the height and width have already been set, no need to reset them.
var svg = d3.select("svg");

//This is the container group for the zoom
var container = svg.append("g")
.attr("class","everything");

//see the above question for explanation for purpose of these variable.
var json_nodes = _dict['one']['nodes'];
var json_links = _dict['one']['links'];

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

//drawing lines for the links
  var link = container.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(json_links)
    .enter().append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
    .style("marker-end","url(#suit)");

//draw the circles for the nodes
  var node = container.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(json_nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); });

//HOUSE KEEPING NOTE: add handlers for drag and zoom as to prevent DRY
var drag_controls = d3.drag()
  .on("start",dragstarted)
  .on("drag",dragged)
  .on("end",dragended);

drag_controls(node); //adding the drag event handlers to the nodes

var zoom_controls = d3.zoom()
.on("zoom",zoomed);

zoom_controls(svg); //adding the zoom event handler to the svg container

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

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

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

  function ticked() {
    link //updates the link positions
        .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 //update the node positions
        .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;
}

//Zoom functions 
function zoomed(){
    container.attr("transform",d3.event.transform)
}
}
于 2017-10-05T06:37:55.807 回答