javascript - D3 节点浮出框架

问题描述

我有几个节点和链接到位。不幸的是，那些“漂浮”在画布之外。我正在使用 D3.V4.js 并找到了几个指南如何解决 D3.v3.js 的问题。不幸的是，这些似乎不起作用。理想情况下，将在画布区域周围布置一个隐藏的或透明的框架。我是新的建筑 D3 图，所以我还想不通。

也许你们可以帮助我在我的代码中调整正确的行。

谢谢

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

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

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

var opacity = 0.25;

d3.json("datav2.json", function(error, graph) {
  if (error) throw error;

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

  var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 15)
  .attr("fill", "#ffffff")
  .style("stroke-width", 2)
  .style("stroke", function(d) { return color(d.group); })
  .attr("nodeGroup",function(d) {return d.nodeGroup; })
        .on("click", function(d) {
      // This is to toggle visibility - need to do it on the nodes and links
      d3.selectAll("line:not([linkGroup='"+d.nodeGroup+"'])")
      .style("opacity", function() {
        currentDisplay = d3.select(this).style("opacity");
        currentDisplay = currentDisplay == "1" ? "0.1" : "1";
        return currentDisplay;
      });
      d3.selectAll("circle:not([nodeGroup='"+d.nodeGroup+"'])")
      .style("opacity",function() {
        currentDisplay = d3.select(this).style("opacity");
        currentDisplay = currentDisplay == "1" ? "0.1" : "1";
        return currentDisplay;
      });
      d3.selectAll("text:not([nodeGroup='"+d.nodeGroup+"'])")
      .style("opacity",function() {
        currentDisplay = d3.select(this).style("opacity");
        currentDisplay = currentDisplay == "1" ? "0.1" : "1";
        return currentDisplay;
      });
  })
  .on("mouseover", function(d) {
        d3.select(this).style("cursor", "crosshair"); 
  })
  .on("mouseout", function(d) {
        d3.select(this).style("cursor", "default"); 
  })
  .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
        
  // This is the label for each node
  var text = svg.append("g").selectAll("text")
  .data(graph.nodes)
  .enter().append("text")
  .attr("dy",-25)
  .text(function(d) { return d.name;})
  .attr("text-anchor", "middle")
  .attr("nodeGroup",function(d) {return d.nodeGroup;} ) ;

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

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

  simulation.force("link")
    .links(graph.links);
    
  function neighboring(a, b) {

  return graph.links.some(function(d) {
      return (d.source.id === a.source.id && d.target.id === b.target.id)
          || (d.source.id === b.source.id && d.target.id === a.target.id);
    });
  }

  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; })
      //.attr("cx2", function(d) { return d.x = Math.max(d.width, Math.min(width - d.width, d.x)); })
      //.attr("cy2", function(d) { return d.y = Math.max(d.height, Math.min(height - heightDelta - d.height, d.y)); });
  
  text
    .attr("x", function(d) { return d.x; })
    .attr("y", 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;
}

标签： javascriptd3.jsgraph

javascript - D3 节点浮出框架

问题描述

解决方案

推荐阅读