Question

我一直在尝试实现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的原因，而不是像大多数其他示例中那样附加）

两个变量＆＃34; json_nodes＆＃34;和＆＃34; json_links＆＃34;从文本文件中获取格式化的节点和链接（就像您在JSON文件中看到的那样）并将它们作为数据传递（想要离线时这样做，以便我出国时）。数据的格式如下：

节点：[{＆＃34; id＆＃34;：＆＃34; Name＆＃34;，＆＃34; group＆＃34;：integer}，...]，

链接：[{＆＃34; source＆＃34;：＆＃34; Name＆＃34;，＆＃34; target＆＃34;：＆＃34; Name＆＃34;，＆＃34; value＆＃34 ;：整数}，...]

如果这是一个重复的问题，我道歉，我还没有找到任何真正直观的帮助。

Answer 1

经过几个小时的激烈盯着屏幕后，我意识到了一些小的家务管理技巧，希望对任何其他D3新手的程序员来说，应用程序更容易理解，更不容易出错。

从我上一个例子中可以看出，当包含D3 .zoom（）方法的zoom变量没有被添加到links变量时，我试图执行缩放功能（正如我在下面指出的那样）。一旦我完成了这一切，一切都很完美。

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

所以希望我的挫折时刻对未来的某个人有用，直到下一个问题，快乐的调试：）

Mr Incompetent。

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

D3力导向图拖动和缩放功能不起作用

1 个答案: