Question

我正在尝试使用d3 v3建立各种静态网络。我想在两个节点之间绘制曲线，类似于collapsible tree example。我将线生成器的插值设置为“基数”，但是这些线是笔直的。前一步和后一步都可以正常工作。

这是我的js：

var arr1 = [
  {id:0,name:"A",depends:[3,4,5]},
  {id:1,name:"B",depends:[4,5]},
  {id:2,name:"C",depends:[3,5]},
];

var arr2 = [
  {id:3,name:"D",depends:[8,10,11]},
  {id:4,name:"E",depends:[9,10,12]},
  {id:5,name:"F",depends:[12]},
  {id:6,name:"G",depends:[8,9]},
  {id:7,name:"H",depends:[12]},
];

var arr3 = [
  {id:8,name:"I",depends:[13,14]},
  {id:9,name:"J",depends:[15,16]},
  {id:10,name:"K",depends:[17]},
  {id:11,name:"L",depends:[15,13]},
  {id:12,name:"M",depends:[16]},
];

var arr4 = [
  {id:13,name:"N",depends:[14]},
  {id:14,name:"O",depends:[]},
  {id:15,name:"P",depends:[]},
  {id:16,name:"Q",depends:[]},
  {id:17,name:"R",depends:[]},
];


var svg = d3.select("svg");

//set node positions
arr1.forEach(function(node,i) {
  node.x = 300;
  node.y = (1000/(arr1.length+1))*(i+1);
});
arr2.forEach(function(node,i) {
  node.x = 600;
  node.y = (1000/(arr2.length+1))*(i+1);
});
arr3.forEach(function(node,i) {
  node.x = 900;
  node.y = (1000/(arr3.length+1))*(i+1);
});
arr4.forEach(function(node,i) {
  node.x = 1200;
  node.y = (1000/(arr4.length+1))*(i+1);
});

//set path start and end points
var nodes = arr1.concat(arr2.concat(arr3.concat(arr4)));
nodes.forEach(function(n) {
  for(let i=0; i<n.depends.length; ++i) {
    //[[start x, start y],[end x, and y]]
    n.depends[i] = [[n.x,n.y],[nodes[n.depends[i]].x,nodes[n.depends[i]].y]];
  }
});


var g = svg.selectAll("g").data(nodes).enter().append("g");

var lineGenerator = d3.svg.line().interpolate("cardinal").x(function(d) { return d[0]; }).y(function(d) { return d[1]; }).tension(0.5);
g.selectAll("path").data(function(d) {return d.depends}).enter().append("path").attr("d",function(d) {
  if(d != undefined) {  return lineGenerator(d);}
});

g.append("circle").attr("cx",function(d){return d.x;}).attr("cy",function(d){return d.y;}).attr("r",10);

g.append("text").attr("x", function(d) {return d.x;}).attr("y", function(d) {return d.y;}).attr("dx", "1em").attr("dy", ".35em").text(function(d) {return d.name;});

What's happening

What I'm trying to do (in red)

也许我应该尝试在可折叠树示例中使用对角线功能？感谢您的帮助

编辑：

在可折叠树示例中，我切换到对角线功能，这使我大部分时间都可以到达想要的位置。

var diagonal = d3.svg.diagonal()
.projection(function(d) {
  return [d.y, d.x];
});

g.selectAll("path").data(function(d) {return d.depends}).enter().append("path").attr("d",function(d) {
  if(d != undefined) { return diagonal({source:{y:d[0][0],x:d[0][1]},target:{y:d[1][0],x:d[1][1]}});}
});

Diagonal result

但是我仍然想知道为什么基数插补器不起作用？

D3 v3线发生器内插基数绘制直线

0 个答案: