渲染d3.js

Question

我一直在尋找一種技術來呈現基於JSON數據樹圖。我找到了graphViz和d3。但是d3在現代瀏覽器上佔據更多優勢。

所以，從提取的JSON數據，我可以呈現圖形底部到頂部，但我想要的鏈接，是肘部等。我也希望它不只是一棵二叉樹。更喜歡的圖片

這裏是我的代碼部分..

var orientation = { 

    "": { 
size: [width, height], 
x: function(d) { return d.x; }, 
y: function(d) { return height - d.y; } 


var svg = d3.select("#graphDiv").selectAll("svg") 
.attr("class","svg_container") 
.data(d3.entries(orientation)) 
.enter().append("svg") 
//.attr("width", width + margin.left + margin.right) 
//.attr("height", height + margin.top + margin.bottom) 
.attr("width", w) 
.attr("height", h) 

.style("overflow", "scroll") 
     .append("svg:g") 
     .attr("class","drawarea") 
     .append("svg:g") 

.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
.on("click", function(){update(root);}); 

svg.append("svg:defs").selectAll("marker") 
.data(["suit", "licensing", "resolved"]) 
.enter().append("svg:marker") 
.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"); 

svg.append("text") 
.attr("x", 6) 
.attr("y", 6) 
.attr("dy", ".71em") 
.text(function(d) { return d.key; }); 

function graph2() 
{ 
d3.json("tree2.json", function(root) { 
svg.each(function(orientation) { 
var svg = d3.select(this), 
    o = orientation.value; 

// Compute the layout. 
var tree = d3.layout.tree().size(o.size), 
    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", d3.svg.diagonal().projection(function(d) { return [o.x(d), o.y(d)]; })); 

// Create the node circles. 
var node = svg.selectAll(".node") 
    .data(nodes) 
    .attr("class", "node") 
    .enter().append("g")  
    .on("click", click);     

    node.append("circle") 
    .attr("r", 4) 
    .attr("cx", o.x) 
    .attr("cy", o.y); 


    node.append("text") 
     .attr("class", "name") 
     .attr("x", o.x) 
     .attr("y", o.y) 
     .text(function(d) { return d.gid+" : "+d.name; }); 

    }); 
}); 

d3.select("svg") 
    .call(d3.behavior.zoom() 
      .scaleExtent([0.5, 5]) 
      .on("zoom", zoom)); 
    update(code); 
} 

Answer 1

我做了類似的譜系圖，但與方向，你所需要的。下面是圖片：

這裏是codepen的代碼。

這應該是你很好的起點。如果您有任何其他問題，請告訴我。