调整大小树取决于d3.js中的节点 [英] resize tree depends upon nodes in d3.js

问题描述

我有多个节点，但它没有在给定的divison中发布它溢出了如何在div中设置节点只有我的代码

i have multiple nodes but its not seeting in given divison it overflows how to set nodes in div only its my code

$.ajax({
              url: '@Url.Action("GetRoutedesign", "Route")',
                 data: JSON.stringify(data1),
                 type: 'POST',
                 contentType: 'application/json;',
                 dataType: 'json',
                 success: function (result) {
                     debugger;

                     var data = result.list;
                     var m = [20, 120, 20, 120],
                         w = 1280 - m[1] - m[3],
                         h = 800 - m[0] - m[2];

                     var dataMap = data.reduce(function (map, node) {
                         debugger;

                         map[node.name] = node;
                         return map;
                     }, {});


                     var treeData = [];
                     data.forEach(function (node) {

                         var parent = dataMap[node.parent];
                         if (parent) {

                             (parent.children || (parent.children = []))

                                 .push(node);
                         } else {

                             treeData.push(node);
                         }
                     });

                     var margin = { top: 20, right: 120, bottom: 20, left: 120 },
                         width = 960 - margin.right - margin.left,
                         height = 500 - margin.top - margin.bottom;

                     var i = 0;

                     var tree = d3.layout.tree()

                         .size([h, w]);

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

                     var svg = d3.select("#viz").append("svg")
                         .attr("id", "chart")
                         .attr("viewBox", "0 0 " + w + " " + h)
                         .attr("preserveAspectRatio", "xMidYMid meet");




                     var   root = treeData[0];

                     update(root);

                     function update(source) {


                         // Compute the new tree layout.
                         var nodes = tree.nodes(root).reverse(),
                             links = tree.links(nodes);

                         // Normalize for fixed-depth.
                         nodes.forEach(function (d) { d.y = d.depth * 180; });

                         // Declare the nodes…
                         var node = svg.selectAll("g.node")
                             .data(nodes, function (d) { return d.id || (d.id = ++i); });

                         // Enter the nodes.
                         var nodeEnter = node.enter().append("g")
                             .attr("class", "node")
                             .attr("transform", function (d) {
                                 return "translate(" + d.y + "," + d.x + ")";
                             });
                         //////////////////////////////////////////////////////////////change color
                         nodeEnter.append("circle")
                             .attr("r", 10)
                             .style("fill", "#fff");

                         nodeEnter.append("text")
                             .attr("x", function (d) {
                                 return d.children || d._children ? -13 : 13;
                             })
                             .attr("dy", ".35em")
                             .attr("text-anchor", function (d) {
                                 return d.children || d._children ? "end" : "start";
                             })
                             .text(function (d) { return d.sid; })
                             .style("fill-opacity", 1);

                         // Declare the links…
                         var link = svg.selectAll("path.link")
                             .data(links, function (d) { return d.target.id; });

                         // Enter the links.
                         link.enter().insert("path", "g")
                             .attr("class", "link")
                             .attr("d", diagonal);
                         var aspect = 960 / 500,
                          chart = $("#chart");



                     }



                 }
             });

推荐答案

.ajax（{
url：' @ Url.Action（GetRoutedesign，Route）'，
data： JSON .stringify(data1），
类型：' POST'，
contentType：' application / json;'，
dataType：' json'，
成功：功能（结果） {
调试器;

var data = result.list;
var m = [ 20 ， 120 ， 20 ， 120 ]，
w = 1280 - m [ 1 ] - m [ 3 ]，
h = 800 - m [ 0 ] - m [ 2 ];

var dataMap = data.reduce（ function （map，node）{
调试器;

map [node.name] = node;
return map;
}，{}）;


var treeData = [];
data.forEach（ function （node）{

var parent = dataMap [node.parent];
if （parent）{

（parent.children ||（parent.children） = []））

.push（node）;
} else {

treeData。 push（node）;
}
}）;

var margin = {top： 20 ，右： 120 ，bottom： 20 ，left： 120 }，
width = 960 - margin.right - margin.left，
height = 500 - margin.top - margin.bottom;

var i = 0 ;

var tree = d3.layout.tree（）

.size（[h，w]）;

var diagonal = d3.svg.diagonal（）
.projection（ function （d）{ return [dy，dx];}）;

var svg = d3.select（ ＃viz）。append（ svg）
.attr（ id， chart）
.attr（ viewBox， 0 0 + w + + h）
.attr（ preserveAspectRatio， xMidYMid符合）;




var root = treeData [ 0 ];

update（root）;

function update（source）{


// 计算新树的布局。
var nodes = tree.nodes （root）.reverse（），
links = tree.links（nodes）;

// 标准化为固定深度。
节点。 forEach（ function （d）{dy = d.depth * 180 ;}）;

// 声明节点......
var node = svg.selectAll（ g.node ）
.data（nodes， function （d）{ return d.id ||（ d.id = ++ i）;}）;

// 输入节点。
var nodeEnter = node.enter（）。append（ g）
.attr（ class， node）
.attr（ transform， function （d）{
return translate（ + dy + ， + dx + ）;
}）;
// //////////////////// //////////////////////////////////////改变颜色
nodeEnter.append（ circle）
.attr（ r， 10 ）
.style（ fill， ＃FFF）;

nodeEnter.append（ text）
.attr （ x， function （d ）{
return d.children || d._children？-13： 13 ;
}）
.attr（ dy， 。35em）
.attr（ < span class =code-string> text-anchor， function （d）{
return d.children || d._children？ end ： start;
}）
.text（ function （d）{ return d.sid ;}）
.style（ fill-opacity， 1 ）;

// 声明链接...
var link = svg.selectAll（ path.link ）
.data（links， function （d）{ return d.target.id; }）;

// 输入链接。
link.enter（ ）.insert（ path， g）
.attr（ class， link）
.attr（ d，对角线）;
var aspect = 960 / 500 ，
chart =

.ajax({ url: '@Url.Action("GetRoutedesign", "Route")', data: JSON.stringify(data1), type: 'POST', contentType: 'application/json;', dataType: 'json', success: function (result) { debugger; var data = result.list; var m = [20, 120, 20, 120], w = 1280 - m[1] - m[3], h = 800 - m[0] - m[2]; var dataMap = data.reduce(function (map, node) { debugger; map[node.name] = node; return map; }, {}); var treeData = []; data.forEach(function (node) { var parent = dataMap[node.parent]; if (parent) { (parent.children || (parent.children = [])) .push(node); } else { treeData.push(node); } }); var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0; var tree = d3.layout.tree() .size([h, w]); var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.y, d.x]; }); var svg = d3.select("#viz").append("svg") .attr("id", "chart") .attr("viewBox", "0 0 " + w + " " + h) .attr("preserveAspectRatio", "xMidYMid meet"); var root = treeData[0]; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function (d) { d.y = d.depth * 180; }); // Declare the nodes… var node = svg.selectAll("g.node") .data(nodes, function (d) { return d.id || (d.id = ++i); }); // Enter the nodes. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; }); //////////////////////////////////////////////////////////////change color nodeEnter.append("circle") .attr("r", 10) .style("fill", "#fff"); nodeEnter.append("text") .attr("x", function (d) { return d.children || d._children ? -13 : 13; }) .attr("dy", ".35em") .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }) .text(function (d) { return d.sid; }) .style("fill-opacity", 1); // Declare the links… var link = svg.selectAll("path.link") .data(links, function (d) { return d.target.id; }); // Enter the links. link.enter().insert("path", "g") .attr("class", "link") .attr("d", diagonal); var aspect = 960 / 500, chart =

（ #chart< /跨度>）;



}



}
}）;

("#chart"); } } });

这篇关于调整大小树取决于d3.js中的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！