در این مقاله درختی از محصولات را ایجاد می کنیم ، و با قابلیت های D3 به آن ویژگی های بصری زیبایی را می دهیم.

D3.js یکی از کتابخانه های کاربردی برای استفاده از گرافیک در وبسایت ها ونرم افزار های تحت وب است که به صورت رایگان در وبسایت رسمی D3 می توانید آن را دریافت کنید.

در ابتدا اقدام به ایجاد یک صفحه از نوع Html می کنیم.


سپس استایل های زیر را به آن اضافه می کنیم.

<style>
        body {
            background-color: #272727;
        }

        .node {
            cursor: pointer;
        }

            .node circle {
                stroke-width: 3px;
            }

            .node text {
                font: 12px sans-serif;
                fill: #fff;
            }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }

        .tree {
            margin-bottom: 10px;
            overflow: auto;
        }
    </style>

در مرحله بعد در صفحه ایجاد شده اقدام به ارجاعات کتابخانه های Jquery و D3 می کنیم.
و یک Div با کلاس tree را ایجاد می کنیم که درخت بر روی آن نمایش داده می شود.
در زیر کد هایی که در Body قرار می گیریند را مشاهده می کنید.

    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <div id="tree">

    </div>

و در آخر نیز کد های جاوااسکریپتی را که وظیفه مدیریت درخت بر عهده آن ها می باشد را بعد از Div با کلاس tree قرار می دهیم.

 

        $(document).ready(function () {
            //build tree
            function BuildVerticaLTree(treeData, treeContainerDom) {
                var margin = { top: 40, right: 120, bottom: 20, left: 120 };
                var width = 960 - margin.right - margin.left;
                var height = 500 - margin.top - margin.bottom;

                var i = 0, duration = 750;
                var tree = d3.layout.tree()
                .size([height, width]);
                var diagonal = d3.svg.diagonal()
                .projection(function (d) { return [d.x, d.y]; });
                var svg = d3.select(treeContainerDom).append("svg")
                .attr("width", width + margin.right + margin.left)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                root = treeData;

                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 * 100; });
                    // 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(" + source.x0 + "," + source.y0 + ")";
                    }).on("click", nodeclick);
                    nodeEnter.append("circle")
                    .attr("r", 10)
                    .attr("stroke", function (d) {
                        return d.children || d._children ?
                        "steelblue" : "#00c13f";
                    })
                    .style("fill", function (d) {
                        return d.children || d._children ?
                        "lightsteelblue" : "#fff";
                    });
                    //.attr("r", 10)
                    //.style("fill", "#fff");
                    nodeEnter.append("text")
                    .attr("y", function (d) {
                        return d.children || d._children ? -18 : 18;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function (d) { return d.name; })
                    .style("fill-opacity", 1e-6);
                    // Transition nodes to their new position.
                    //horizontal tree
                    var nodeUpdate = node.transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + d.x +
                        "," + d.y + ")";
                    });
                    nodeUpdate.select("circle")
                    .attr("r", 10)
                    .style("fill", function (d)
                    { return d._children ? "lightsteelblue" : "#fff"; });
                    nodeUpdate.select("text")
                    .style("fill-opacity", 1);

                    // Transition exiting nodes to the parent's new position.
                    var nodeExit = node.exit().transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + source.x +
                        "," + source.y + ")";
                    })
                    .remove();
                    nodeExit.select("circle")
                    .attr("r", 1e-6);
                    nodeExit.select("text")
                    .style("fill-opacity", 1e-6);
                    // Update the links…
                    // 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", function (d) {
                        var o = { x: source.x0, y: source.y0 };
                        return diagonal({ source: o, target: o });
                    });
                    // Transition links to their new position.
                    link.transition()
                    .duration(duration)
                    .attr("d", diagonal);

                    // Transition exiting nodes to the parent's new position.
                    link.exit().transition()
                    .duration(duration)
                    .attr("d", function (d) {
                        var o = { x: source.x, y: source.y };
                        return diagonal({ source: o, target: o });
                    })
                    .remove();

                    // Stash the old positions for transition.
                    nodes.forEach(function (d) {
                        d.x0 = d.x;
                        d.y0 = d.y;
                    });
                }

                // Toggle children on click.
                function nodeclick(d) {
                    if (d.children) {
                        d._children = d.children;
                        d.children = null;
                    } else {
                        d.children = d._children;
                        d._children = null;
                    }
                    update(d);
                }
            }

            var treeData =
            {
                "name": "تکلنولوژی",
                "parent": "null",
                "children": [
                {
                    "name": "مایکروسافت",
                    "parent": "Top Level",
                    "children": [
                    {
                        "name": "ویندوز",
                        "parent": "Level 2: A",
                        "children": []
                    },
                    {
                        "name": "فریم وورک دات نت",
                        "parent": "Level 2: A",
                        "children": []
                    }
                    ]
                },
                {
                    "name": "اپل",
                    "parent": "Top Level",
                    "children": [
                    {
                        "name": "مکینتاش",
                        "parent": "Level 2: A",
                        "children": []
                    },
                    {
                        "name": "مک بوک",
                        "parent": "Level 2: A",
                        "children": []
                    }
                    ]
                },
                {
                    "name": "گوگل",
                    "parent": "",
                    "children": [{
                        "name": "موتور جست و جو",
                        "parent": "Level 2: A",
                        "children": []
                    },
                    {
                        "name": "پیام رسان",
                        "parent": "Level 2: A",
                        "children": []
                    }]
                },
                {
                    "name": "اوراکل",
                    "parent": "Top Level",
                    "children": []
                }
                ]
            };
            BuildVerticaLTree(treeData, "#tree");
        });

حالا پروژه را اجرا کرده و نتیجه را در تصویر زیر مشاهده می کنید.