d3js树形图不适合画布

时间：2017-05-03 10:08:47

标签： javascript d3.js canvas

我正在使用d3.js v3，我试图创建一个树形图，但是我无法使画布成为正确的数据大小，因为我不知道多少级别或数据将具有的节点。

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

http://test.mywebpro.co.uk/graph1.htm以及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]

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

2 个答案:

答案 0 :(得分：1)

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

var svg = canvas.node().parentNode;
var bbox = canvas.node().getBBox();
d3.select(svg)
  .attr("height",bbox.height);
  .attr("width",bbox.height);

答案 1 :(得分：1)

感谢您提供的信息，我对其进行了重构并使其正常运行

    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;
            });






    });
相关问题
最新问题