需要帮助witi d3.js treee

时间:2018-11-19 03:25:43

标签: javascript d3.js

我的d3.js树代码在那里。基本上,合作伙伴位于节点9000的左侧。8001是一个合作伙伴,其子代为9005。第二个合作伙伴为8000,而9001是9000和8000的子代。我可以调整各个合作伙伴的水平线,但可以调整合作伙伴的y位置儿童9001。尝试让9001来的线接触8000-8001。

http://jsfiddle.net/anil3405/fcd5q8fv/70/

    var margin = {
    top: 10,
    right: 40,
    bottom:300,
    left: 10
  },
  width = 740,
  height =320;

var kx = function (d) {
  return d.x - 25;
};

var ky = function (d) {
  return d.y - 15;
};

//thie place the text x axis adjust this to center align the text
var tx = function (d) {
  return d.x - 10;
};

//thie place the text y axis adjust this to center align the text
var ty = function (d) {
  return d.y + 3;
};

//make an SVG
var svg = d3.select("#graph").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//My JSON note the 
//no_parent: true this ensures that the node will not be linked to its parent
//hidden: true ensures that the nodes is not visible.
var root = {
  name: "",
  id: 1,
  hidden: true,
  children: [{
    name: "8000",
    id: 8000,
    no_parent: true
  }, {
    name: "",
    id: 100,
    no_parent: true,
    hidden: true,
    children: [{
      name: "9001",
      id: 9001
    }, ]
  },{
    name: "8001",
    id: 8001,
    no_parent: true
  },{
    name: "",
    id: 100,
    no_parent: true,
    hidden: true,
    children: [{
      name: "9005",
      id: 9005
    }]
  },{
    name: "9000",
    id: 9000,
    no_parent: true
  }]
}

var allNodes = flatten(root);
//This maps the siblings together mapping uses the ID using the blue line


var siblings = [ {
  source: {
    id: 9000,
    name: "Q1"
  },
  target: {
    id: 8001,
    name: "P1"
  }



}];


var siblings2 = [ {
source: {
    id: 9000,
    name: "L1"
  },
  target: {
    id: 8000,
    name: "J1"
  }
}];


// Compute the layout.
var tree = d3.layout.tree().size([width, height]),
 nodes = tree.nodes(root),
 links = tree.links(nodes);

// Create the link lines.
svg.selectAll(".link")
  .data(links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", elbow);



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

//First draw sibling line with blue line
svg.selectAll(".sibling")
  .data(siblings)
 // .data(siblings2)
  .enter().append("path")
  .attr("class", "sibling")
  .attr("d", sblingLine)

svg.selectAll(".sibling2")
  .data(siblings2)
  .enter().append("path")
  .attr("class", "sibling2")
  .attr("d", sblingLine2);


// Create the node rectangles.
nodes.append("rect")
  .attr("class", "node")
  .attr("height", 30)
  .attr("width", 60)
  .attr("id", function (d) {
    return d.id;
  })
  .attr("display", function (d) {
    if (d.hidden) {
      return "none"
    } else {
      return ""
    };
  })
  .attr("x", kx)
  .attr("y", ky);
// Create the node text label.
nodes.append("text")
  .text(function (d) {
    return d.name;
  })
  .attr("x", tx)
  .attr("y", ty);


/**
This defines teh line between siblings.
**/
function sblingLine(d, i) {
  //start point
  var start = allNodes.filter(function (v) {
    if (d.source.id == v.id) {
      return true;
    } else {
      return false;
    }
  });
  //end point
  var end = allNodes.filter(function (v) {
    if (d.target.id == v.id) {
      return true;
    } else {
      return false;
    }
  });
  //define teh start coordinate and end co-ordinate
  var linedata = [{
    x: start[0].x,
    y: start[0].y
  }, {
    x: end[0].x,
    y: end[0].y
  }];
  var fun = d3.svg.line().x(function (d) {
    return d.x;
  }).y(function (d) {
    return d.y+9;
  }).interpolate("linear");
  return fun(linedata);
}

// sblingLine2 new function
function sblingLine2(d, i) {
  //start point
  var start = allNodes.filter(function (v) {
    if (d.source.id == v.id) {
      return true;
    } else {
      return false;
    }
  });
  //end point
  var end = allNodes.filter(function (v) {
    if (d.target.id == v.id) {
      return true;
    } else {
      return false;
    }
  });
  //define teh start coordinate and end co-ordinate
  var linedata = [{
    x: start[0].x,
    y: start[0].y
  }, {
    x: end[0].x,
    y: end[0].y
  }];
  var fun = d3.svg.line().x(function (d) {
    return d.x;
  }).y(function (d) {
    return d.y-8;
  }).interpolate("linear");
  return fun(linedata);
}


/*To make the nodes in flat mode.
This gets all teh nodes in same level*/
function flatten(root) {
  var n = [],
    i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    n.push(node);
  }
  recurse(root);
  return n;
}
/** 
This draws the lines between nodes.
**/
function elbow(d, i) {
  if (d.target.no_parent) {
    return "M0,0L0,0";
  }
  var diff = d.source.y - d.target.y;
  //0.40 defines the point from where you need the line to break out change is as per your choice.
  var ny = d.target.y + diff * 0.30;

  linedata = [{
    x: d.target.x,
    y: d.target.y
  }, {
    x: d.target.x,
    y: ny
  }, {
    x: d.source.x,
    y: d.source.y+9
  }]

  var fun = d3.svg.line().x(function (d) {
    return d.x;
  }).y(function (d) {
    return d.y;
  }).interpolate("step-after");
  return fun(linedata);
}

0 个答案:

没有答案