CODEWITHSUNDEEP
javascriptjqueryd3.jssvg
user6797714
user6797714

Reputation:

How to append element to div with id using d3js javascript

I am using http://d3js.org/d3.v3.min.js.

I have code that append svg to my body html element.

  var svg = d3.select("body").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 + ")");

This code append <svg> to <body>

I am new in javascript and i don't know how to write code that append this svg to my div: <div id="svg">

I try: var svg = d3.select(document.getElementById("svg")).append("svg")... but it not working.

Thank you for any help!

Edit: There is a full code for testing

    <style>
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 3px;
        }

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

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

        var treeData = [
            {
                "name": "Top Level",
                "parent": "null",
                "children": [
                    {
                        "name": "Level 2: A",
                        "parent": "Top Level",
                        "children": [
                            {
                                "name": "Son of A",
                                "parent": "Level 2: A"
                            },
                            {
                                "name": "Daughter of A",
                                "parent": "Level 2: A"
                            }
                        ]
                    },
                    {
                        "name": "Level 2: B",
                        "parent": "Top Level"
                    }
                ]
            }
        ];

        // ************** Generate the tree diagram  *****************
        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([height, width]);

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

//        var svg = d3.select("div#tree").append("svg")
          var svg = d3.select("#tree").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[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 + ")";
                    });

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

        }

    </script>

Upvotes: 0

Views: 3158

Answers (1)

Rax Weber
Rax Weber

Reputation: 3780

Simply use d3.select("#svg").

Upvotes: 1

Related Questions