Javascript d3点击时关注节点_Javascript_D3.js

Javascript d3点击时关注节点

javascript d3.js

Javascript d3点击时关注节点,javascript,d3.js,Javascript,D3.js,我正在尝试实现一个force布局，在该布局中，单击一个节点将能够聚焦节点周围的区域。我已经看了几个例子，但是我得到一个错误，它说link.bounds没有定义。我认为边界不是为力布局定义的，并且适用于这个例子，在这里我使用了聚焦函数 var dx、dy、x和y的值应该是多少 <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="https://d3js.org/d3.v3.min.js"&g

我正在尝试实现一个force布局，在该布局中，单击一个节点将能够聚焦节点周围的区域。我已经看了几个例子，但是我得到一个错误，它说

link.bounds没有定义

。我认为边界不是为力布局定义的，并且适用于这个例子，在这里我使用了聚焦函数

var dx、dy、x和y的值应该是多少
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    active = d3.select(null);

var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);    

var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(40)
    .on("tick", tick);

var drag = force.drag()
    .on("dragstart", dragstart);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

var g = svg.append("g");    

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

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  link = link.data(graph.links)
    .enter().append("line")
      .attr("class", "link");

  node = node.data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 12)
      .on("click", clicked)
      .call(drag);
});

function tick() {
  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 clicked(d){
    if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = link.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  svg.transition()
      .duration(750)
      .call(zoom.translate(translate).scale(scale).event);
} 

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  svg.transition()
      .duration(750)
      .call(zoom.translate([0, 0]).scale(1).event);
}    


function dragstart(d) {
  d3.select(this).classed("fixed", d.fixed = true);
}

function zoomed() {
  g.style("stroke-width", 1.5 / d3.event.scale + "px");
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}    

</script>


可变宽度=960，
高度=500，
活动=d3。选择（空）；
var zoom=d3.behavior.zoom（）
.translate（[0，0]）
.比额表（1）
.scaleExtent（[1,8]）
。打开（“缩放”，缩放）；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
。收费（-400）
.linkDistance（40）
.在（“滴答”，滴答）上；
var drag=force.drag（）
.on（“dragstart”，dragstart）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，重置）；
var link=svg.selectAll（“.link”），
node=svg.selectAll（“.node”）；
var g=svg.append（“g”）；
json（“miserables.json”），函数（错误，图形）{
如果（错误）抛出错误；
力
.nodes（图.nodes）
.links（graph.links）
.start（）；
link=link.data（graph.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
node=node.data（graph.nodes）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，12）
。打开（“单击”，单击）
.呼叫（拖动）；
});
函数tick（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
单击函数（d）{
if（active.node（）==此）返回reset（）；
活动。分类（“活动”，假）；
active=d3.选择（this）.classed（“active”，true）；
变量界限=链接界限（d），
dx=边界[1][0]-边界[0][0]，
dy=边界[1][1]-边界[0][1]，
x=（界限[0][0]+界限[1][0]）/2，
y=（界限[0][1]+界限[1][1]）/2，
比例=数学最大值（1，数学最小值（8，0.9/数学最大值（dx/宽度，dy/高度）），
平移=[宽度/2-比例*x，高度/2-比例*y]；
svg.transition（）
.持续时间（750）
.call（缩放、平移、缩放、事件）；
} 
函数重置（）{
活动。分类（“活动”，假）；
活动=d3。选择（空）；
svg.transition（）
.持续时间（750）
.call（缩放、平移（[0,0]）.scale（1.event）；
}    
函数dragstart（d）{
d3.选择（this）.classed（“fixed”，d.fixed=true）；
}
函数缩放（）{
g、 样式（“笔划宽度”，1.5/d3.event.scale+“px”）；
g、 attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
}    
通过使用单击节点的bbox
重新编写函数，可以在力布局上重新创建缩放效果：
function clicked(d){
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bbox = active.node().getBBox(),
      bounds = [[bbox.x, bbox.y],[bbox.x + bbox.width, bbox.y + bbox.height]]; //<-- the bounds from getBBox

  var dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  svg.transition()
      .duration(750)
      .call(zoom.translate(translate).scale(scale).event);
} 

单击的函数（d）{
if（active.node（）==此）返回reset（）；
活动。分类（“活动”，假）；
active=d3.选择（this）.classed（“active”，true）；
var bbox=active.node（）.getBBox（），
bounds=[[bbox.x，bbox.y]，[bbox.x+bbox.width，bbox.y+bbox.height]]；//通过使用单击节点的bbox
重新编写函数，可以在强制布局上重新创建缩放效果：
function clicked(d){
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bbox = active.node().getBBox(),
      bounds = [[bbox.x, bbox.y],[bbox.x + bbox.width, bbox.y + bbox.height]]; //<-- the bounds from getBBox

  var dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  svg.transition()
      .duration(750)
      .call(zoom.translate(translate).scale(scale).event);
} 

单击的函数（d）{
if（active.node（）==此）返回reset（）；
活动。分类（“活动”，假）；
active=d3.选择（this）.classed（“active”，true）；
var bbox=active.node（）.getBBox（），
边界=[[bbox.x，bbox.y]，[bbox.x+bbox.width，bbox.y+bbox.height]]；//非常感谢！非常好用。我尝试用不同的JSON文件实现相同的功能，源和目标是字符串形式，而不是索引形式，它抛出了一个TypeError u.source.x未定义。我从另一个问题了解到D3.v3不支持它，需要使用v4。但是，对于v4，zoom.translate未定义。如何解决这个问题？非常感谢！非常感谢！效果非常好。我尝试使用不同的JSON文件实现同样的问题，源和目标以字符串而不是索引的形式，它抛出了一个TypeError u.source.x未定义。我从另一个问题了解到D3.v3不支持它，需要使用v4.Howev呃，v4的zoom.translate没有定义。如何解决这个问题？非常感谢！