1

我正在使用 D3.js 创建一个导航流程图。基本上，到目前为止看起来还不错，但是，当我更改内容以在节点之间的链接上包含标题/工具提示（以反映有多少人从一个页面点击到另一个页面）时，我无法做到 -

var data =  [{"value":"1","target":"SearchActivity","source":"CommonFriendActivity"},{"value":"1","target":"SearchActivity","source":"InviteActivity"},{"value":"1","target":"SearchActivity","source":"LikeDetailActivity"},{"value":"1","target":"Exit","source":"LoginScreenActivity"},{"value":"1","target":"InviteActivity","source":"LoginScreenActivity"},{"value":"1.5","target":"SearchActivity","source":"LoginScreenActivity"},{"value":"1","target":"Exit","source":"SearchActivity"},{"value":"1","target":"InviteActivity","source":"SearchActivity"},{"value":"1","target":"PictureActivity","source":"SearchActivity"},{"value":"1","target":"UserDetailActivity","source":"SearchActivity"},{"value":"1","target":"CommonFriendActivity","source":"UserDetailActivity"},{"value":"1","target":"Exit","source":"UserDetailActivity"},{"value":"1","target":"LikeDetailActivity","source":"UserDetailActivity"},{"value":"1","target":"SearchActivity","source":"UserDetailActivity"}];

var nodes = {};

// Compute the distinct nodes from the links.
data.forEach(function(link) {
  link.source = nodes[link.source] ||
    (nodes[link.source] = {name: link.source, tooltip: link.value});
  link.target = nodes[link.target] ||
    (nodes[link.target] = {name: link.target, tooltip: link.value});
  link.value = +link.value;
});

var width = 600,
height = 500;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(data)
.size([width, height])
.linkDistance(200)
.charge(-300)
.on("tick", tick)
.start();

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(data, function(d) { return d.value; })]);

// asign a type per value to encode opacity
data.forEach(function(link) {
  if (v(link.value) <= 25) {
    link.type = "twofive";
  } else if (v(link.value) <= 50 && v(link.value) > 25) {
    link.type = "fivezero";
  } else if (v(link.value) <= 75 && v(link.value) > 50) {
    link.type = "sevenfive";
  } else if (v(link.value) <= 100 && v(link.value) > 75) {
    link.type = "onezerozero";
  }
});

var svg = d3.select("#phone_layout").append("svg")
.attr("width", width)
.attr("height", height);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
.data(["end"])      // Different link/path types can be defined here
.enter().append("svg:marker")    // This section adds in the arrows
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag);

// add the nodes
node.append("circle")
.attr("r", 10)
.style("fill", "steelblue")
.style("stroke", "lightsteelblue")
.style("stroke-width", ".5px")
.style("font", "20px sans-serif");

// add the text
node.append("text")
.attr("x", 15)
.attr("dy", ".9em")
.text(function(d) { return d.name; });

// add the curvy lines
function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
    return "M" +
      d.source.x + "," +
      d.source.y + "A" +
      dr + "," + dr + " 0 0,1 " +
      d.target.x + "," +
      d.target.y;
  });

  node
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"; });
}

这是 jsfiddle - http://jsfiddle.net/uMceL/7/ PS：链接也看起来不正确，但当我使用相同的代码时它们在网页上看起来很好。

任何帮助/指针将不胜感激

4

0 回答 0