时间戳

首页 > 解决方案 > 在 D3js v4 中突出显示子节点

javascript - 在 D3js v4 中突出显示子节点

问题描述

我一直在尝试突出显示 D3js 强制导向可视化中的连接节点。使用各种教程和 Mike Bostock 的工作，我设法突出显示节点和链接，但是，子节点没有突出显示

编码

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

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

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

text {
  font-family: sans-serif;
  font-size: 10px;
}

</style>
</head>
<body>
<svg width="1000" height="1000"></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().distance(function(d) { return d.distance; }).id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("data.json", 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("g")
    .data(graph.nodes)
    .enter().append("g")
        .on("mouseover", fade(.1))
        .on("mouseout", fade(1))
    
  var circles = node.append("circle")
      .attr("r", 20)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  var lables = node.append("text")
      .text(function(d) {
        return d.id;
      })
      .attr('x', 6)
      .attr('y', 3);

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

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

  simulation.force("link")
      .links(graph.links);
    
  var linkedById = {};
    json.links.forEach(function(d) {
        linkedById[d.source.id + "," + d.target.id] = 1;
  });

  function neighboring(a, b) {
    return linkedById[a.id + "," + b.id] || linkedById[b.id + "," + a.id] || a.id == b.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("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        })
  }
  function fade(opacity) {
    return function(d) {
      node.style("opacity", function(o) {
          return neighboring(d, o) ? 1 : opacity;
      });


      link.style("stroke-opacity", function(o) {
        return o.source === d || o.target === d ? 1 : opacity;
      });
    };
  } 
});

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;
}
/*  Scaling nodes
function mouseover() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 30);
}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 20);
}
*/

</script>
</body> 
</html>

Json 文件格式化示例

{
  "nodes": [
    {"id": "A", "group": 1},
    {"id": "B", "group": 1},
    {"id": "C", "group": 2},
    {"id": "D", "group": 2},
    {"id": "E", "group": 3},
    {"id": "F", "group": 3}
  ],
  "links": [
    {"source": "A", "target": "B", "value": 2, "distance": 300},
    {"source": "A", "target": "C", "value": 2, "distance": 300},
    {"source": "A", "target": "E", "value": 2, "distance": 300},
    {"source": "B", "target": "C", "value": 2, "distance": 300},
    {"source": "B", "target": "D", "value": 2, "distance": 300},
    {"source": "B", "target": "F", "value": 2, "distance": 300}
  ]
}

我假设它与我使用命名源和目标而不是 ID 有关？我看过这个 http://jsfiddle.net/tristanreid/xReHA/636/

我看到的唯一区别是调用源和目标的方式。由于我拥有的数据集，我更喜欢使用命名的源和目标。

任何帮助将不胜感激。

提前致谢

标签： javascriptd3.js

解决方案

它不起作用的唯一原因是因为您调用了 data graph，而不是json. 更改以下行：

var linkedById = {};
json.links.forEach(function(d) {
    linkedById[d.source.id + "," + d.target.id] = 1;
});

至

var linkedById = {};
graph.links.forEach(function(d) {
    linkedById[d.source.id + "," + d.target.id] = 1;
});

你会突然看到，linkedById被正确填充，相邻节点被正确识别，并且突出显示有效。

推荐阅读