Javascript d3js树形图不适合画布

我使用的是d3.js v3，我曾尝试创建一个树形图，但我很难让画布成为数据的正确大小，因为在前面我不知道数据将有多少层或节点

我创建了几个URL，显示页面上不适合的图表

还有graph2.htm

我正在使用下面的js

var widthMultiplier = 535;
    var heightMultiplier = 65;
    d3.json("scripts/data1.json", function (data) {

        var depth = getDepth(data);

        var width = widthMultiplier * depth;
        var height = heightMultiplier * getItems(data);



        var translateWidth = ((height / 5) / 2);

        var canvas = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(50," + translateWidth + ")");


        var treeWidth = width - 100;
        var treeHeight = (height - (height / 5));

        var tree = d3.layout.tree().size([treeWidth, treeHeight]);
        var nodes = tree.nodes(data);
        var links = tree.links(nodes);


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

        canvas.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("fill", "none")
            .attr("stroke", "#ADADAD")
            .attr("d", diagonal);


        var node = canvas.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })

        node.append("circle")
            .attr("r", 5)
            .attr("fill", "steelblue");


        node.append("text").text(function (d) { return d.description; })
            .attr("dy", ".35em").attr("x", "10")
            .style('fill', function (d) {
                return d.error ? 'red' : '#303030';
            })



        node.append("svg:title")
            .text(function (d) {
                return d.description;
            });

    }
    )

    getDepth = function (obj) {
        var depth = 0;
        if (obj.children) {
            obj.children.forEach(function (d) {
                var tmpDepth = getDepth(d)
                if (tmpDepth > depth) {
                    depth = tmpDepth
                }
            })
        }
        return 1 + depth
    }

    getItems = function (obj) {
        var items = 0;
        if (obj.children) {
            obj.children.forEach(function (d) {
                items += getItems(d)
            })
        }
        return 1 + items
    }

根据使用示例数据

[{
  "name": "test page 2",
  "error": false,
  "children": \[
    {
      "name": "This is a test string only",
      "url": "http://www.test.com",
      "description": "test description",
      "error": false
    },
    {
      "name": "This is a test string only",
      "url": "http://www.test.com",
      "description": "test description",
      "error": false,
      "children": \[
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false,
              "children": \[
                {
                  "name": "This is a test string only",
                  "url": "http://www.test.com",
                  "description": "test description",
                  "error": false
                }
              \]
            }
          \]
        }
      \]
    },
    {
      "name": "This is a test string only",
      "url": "http://www.test.com",
      "description": "test description",
      "error": false,
      "children": \[
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            },
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        }
      \]
    },
    {
      "name": "This is a test string only",
      "url": "http://www.test.com",
      "description": "test description",
      "error": false,
      "children": \[
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            },
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        }
      \]
    },
    {
      "name": "This is a test string only",
      "url": "http://www.test.com",
      "description": "test description",
      "error": false,
      "children": \[
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": false,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        },
        {
          "name": "This is a test string only",
          "url": "http://www.test.com",
          "description": "test description",
          "error": true,
          "children": \[
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            },
            {
              "name": "This is a test string only",
              "url": "http://www.test.com",
              "description": "test description",
              "error": false
            }
          \]
        }
      \]
    }
  \]
}][1]

---

我已经尝试过处理这些文档，但仍然无法将其调整到生成的图表的实际大小。

尝试在

d3.json的回调函数末尾添加以下代码。（绘制包括标签在内的完整图表后）

谢谢你提供的信息，我对它进行了一点重构并使其正常工作

    d3.json("scripts/data2.json", function (data) {
        var nodeHeight = 20;
        var nodeWidth = 250;
        var circleRadius = 5;

        var tree = d3.layout.tree().nodeSize([nodeHeight, nodeWidth]);
        var nodes = tree.nodes(data);
        var links = tree.links(nodes);

        var max_y = Math.max.apply(Math, nodes.map(function(o){return o.y;}));

        var max_x = Math.max.apply(Math, nodes.map(function(o){return o.x;}));
        var min_x = Math.min.apply(Math, nodes.map(function(o){return o.x;}));

        var canvas = d3.select("#body").append("svg")
            .attr({
                xmlns: "http://www.w3.org/2000/svg",
                "xmlns:xlink": "http://www.w3.org/1999/xlink",
                width: max_y + nodeWidth + circleRadius, 
                height: max_x - min_x + nodeHeight
            })
            .append("g")
            .attr("transform", "translate(" + circleRadius + "," + (-min_x + nodeHeight/2) + ")");

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

        canvas.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("fill", "none")
            .attr("stroke", "#ADADAD")
            .attr("d", diagonal);

        var node = canvas.selectAll("g.node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })

        var anchor = node.append("a")
            .attr("xlink:href", function (d) { return d.url; });

        anchor.append("circle")
            .attr("r", circleRadius)
            .attr("fill", "#fff")
            .attr("stroke", "steelblue")
            .attr("stroke-width", "1.5px");

        anchor.append("text").text(function (d) { return d.description; })
            .attr("dy", ".35em").attr("x", "10")
            .style('fill', function (d) {
                return d.error ? 'red' : '#303030';
            })

        anchor.append("svg:title")
            .text(function (d) {
                return d.description;
            });






    });

    d3.json("scripts/data2.json", function (data) {
        var nodeHeight = 20;
        var nodeWidth = 250;
        var circleRadius = 5;

        var tree = d3.layout.tree().nodeSize([nodeHeight, nodeWidth]);
        var nodes = tree.nodes(data);
        var links = tree.links(nodes);

        var max_y = Math.max.apply(Math, nodes.map(function(o){return o.y;}));

        var max_x = Math.max.apply(Math, nodes.map(function(o){return o.x;}));
        var min_x = Math.min.apply(Math, nodes.map(function(o){return o.x;}));

        var canvas = d3.select("#body").append("svg")
            .attr({
                xmlns: "http://www.w3.org/2000/svg",
                "xmlns:xlink": "http://www.w3.org/1999/xlink",
                width: max_y + nodeWidth + circleRadius, 
                height: max_x - min_x + nodeHeight
            })
            .append("g")
            .attr("transform", "translate(" + circleRadius + "," + (-min_x + nodeHeight/2) + ")");

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

        canvas.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("fill", "none")
            .attr("stroke", "#ADADAD")
            .attr("d", diagonal);

        var node = canvas.selectAll("g.node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })

        var anchor = node.append("a")
            .attr("xlink:href", function (d) { return d.url; });

        anchor.append("circle")
            .attr("r", circleRadius)
            .attr("fill", "#fff")
            .attr("stroke", "steelblue")
            .attr("stroke-width", "1.5px");

        anchor.append("text").text(function (d) { return d.description; })
            .attr("dy", ".35em").attr("x", "10")
            .style('fill', function (d) {
                return d.error ? 'red' : '#303030';
            })

        anchor.append("svg:title")
            .text(function (d) {
                return d.description;
            });






    });