My D3js treemap chart is ou of my div when i zoom on it

I have a small problem with my D3 treemap chart. When i click on element my chart zoom on this element but the chart gone out of my div. I want the chart stay in my block cardnavigation
Here is my chart code:

function showtreemap (data, target) {


    //console.log(d3.schemeCategory20c)
    const tileWidth = 100
    const tileHeight = 100
    const tileScale = d3.scaleOrdinal().range(d3.schemeAccent)


    
    var tileXscale = d3.scaleLinear().domain([0, tileWidth]).range([0, tileWidth])
    var tileYscale = d3.scaleLinear().domain([0, tileHeight]).range([0, tileHeight])

    var div = d3.select(target)
    //var div = $(target);
    

    var treemap = d3.treemap()
        .size([tileWidth, tileHeight])

    var root = d3.hierarchy(data)
        // For equal representation
        .sum(function (d) {
            return d.value ? 1 : 0
        })


        
    // .sum((d) => d.value)
    var tree = treemap(root)

    var cells = div.selectAll(".node")
        .data(root.descendants())
        .enter()
        .append("div")
        .attr("class", function (d) {
            return "node level-" + d.depth
        })
        .attr("title", function (d) {
            return d.data.name
        })

    cells.style("left", function (d) {
        return tileXscale(d.x0) + "%"
    })
        .style("top", function (d) {
            return tileYscale(d.y0) + "%"
        })
        .style("width", function (d) {
            return tileXscale(d.x1) - tileXscale(d.x0) + "%"
        })
        .style("height", function (d) {
            return tileYscale(d.y1) - tileYscale(d.y0) + "%"
        })
        .style("background-color", function (d) {
            while (d.depth > 2) {
                d = d.parent
            }
            return tileScale(d.data.name)
        })
        .on("click", zoom)
        .append("p")
        .attr("class", "label")
        .text(function (d) {
            return d.data.name ? d.data.name : "---"
        })

    var parent = d3.select(".up")
        .datum(root)
        .on("click", zoom)

    // The zooming behavior was based off of here: https://codepen.io/znak/pen/qapRkQ?editors=0010
    function zoom(d) {
        var currentDepth = d.depth
        parent.datum(d.parent || root)
        tileXscale.domain([d.x0, d.x1])
        tileYscale.domain([d.y0, d.y1])

        var t = d3.transition()
            .duration(800)
            .ease(d3.easeCubicOut)

        cells.transition(t)
            .style("left", function (d) {
                return tileXscale(d.x0) + "%"
            })
            .style("top", function (d) {
                return tileYscale(d.y0) + "%"
            })
            .style("width", function (d) {
                return tileXscale(d.x1) - tileXscale(d.x0) + "%"
            })
            .style("height", function (d) {
                return tileYscale(d.y1) - tileYscale(d.y0) + "%"
            })

        // Hide this depth and above
        cells.filter(function (d) {
            return d.ancestors()
        })
            .classed("hide", function (d) {
                return d.children ? true : false
            })

        cells.filter(function (d) {
            return d.depth > currentDepth
        })
            .classed("hide", false)
    }
}

and here is my page code:

{% extends 'layouts/base.html.twig' %}

{% block title %}My IT Maps
{% endblock %}

{% block body %}
<!-- Begin Page Content -->
<div
    class="container-fluid body1">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Navigation</h1>
    </div>
    <div class="col-md-12 row">
        <div
            class="col-md-3">
            <!-- Default Card -->
            <div class="card mb-4">
                <div class="card-header"></div>
                <div class="card-body">
                    <form
                        action="" method="post">
                        <!-- <div>
                                                        <label>
                                                            <input id = "circulaire" type="radio">Vue circulaire
                                                        </label>
                                                    </div>
                                                    <div>
                                                        <label>
                                                            <input id = "treemap" type="radio" checked>Treemap
                                                        </label>
                                                    </div>
                                                    <div>
                                                        <label>
                                                            <input id="list" type="radio">Arbo
                                                        </label>
                                                    </div>
                                                    <div>
                                                        <label>
                                                            <input type="radio">List
                                                        </label>
                                                    </div>   -->

                        <label>
                            <input id="graph" name="graph" type="radio" value="treemap" checked>Treemap
                        </label>
                        <label>
                            <input id="graph" name="graph" type="radio" value="donuts">Donuts
                        </label>
                        <label>
                            <input id="graph" name="graph" type="radio" value="list">List
                        </label>
                        <hr>
                        <div class="form-group">

                            <select id="inputState" class="form-control">
                                <option selected>Fonctions métiers</option>
                                <option>Sociétés</option>
                                <option>Sites</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Default Card Example -->
            <div class="card mb-4">
                <div class="card-header">
                    Sociétés
                </div>
                <div class="card-body tree">
                    <div id="jstree1">
                        <ul>
                            <li>
                                <i class="jstree-icon jstree-ocl"></i>
                                <a href="#">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node 1</a>
                                <ul>
                                    <li>
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor  jstree-clicked" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>
                                            <em>initially</em>
                                            <strong>selected</strong>
                                        </a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;https://jstree.com/tree-icon.png&quot; }" id="j1_3" class="jstree-node  jstree-leaf" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" style="background-image: url(https://jstree.com/tree-icon.png); background-size: auto; background-position: 50% 50%;"></i>custom
                                                                                                                                                                                                                                                                                                                                                                                icon URL</a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;opened&quot; : true }" aria-expanded="true" id="j1_4" class="jstree-node  jstree-open" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>initially open
                                        </a>
                                        <ul role="group" class="jstree-children">
                                            <li role="treeitem" id="j1_5" class="jstree-node  jstree-leaf jstree-last">
                                                <i class="jstree-icon jstree-ocl"></i>
                                                <a class="jstree-anchor" href="#">
                                                    <i class="jstree-icon jstree-themeicon"></i>Another
                                                                                                                                                                                                                                                                                                                                                                                                                                        node</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;glyphicon glyphicon-leaf&quot; }" id="j1_6" class="jstree-node  jstree-leaf jstree-last">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon glyphicon glyphicon-leaf jstree-themeicon-custom"></i>Custom
                                                                                                                                                                                                                                                                                                                                                                                icon class (bootstrap)</a>
                                    </li>
                                </ul>
                            </li>
                            <li role="treeitem" id="j1_7" class="jstree-node  jstree-leaf jstree-last">
                                <i class="jstree-icon jstree-ocl"></i>
                                <a class="jstree-anchor" href="https://www.jstree.com">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node
                                                                                                                                                                                                                                                                                                                        2</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Default Card Example -->
            <div class="card mb-4">
                <div class="card-header">
                    Sites
                </div>
                <div class="card-body">
                    <div id="jstree2">
                        <ul>
                            <li>
                                <i class="jstree-icon jstree-ocl"></i>
                                <a href="#">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node 1</a>
                                <ul>
                                    <li>
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor  jstree-clicked" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>
                                            <em>initially</em>
                                            <strong>selected</strong>
                                        </a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;https://jstree.com/tree-icon.png&quot; }" id="j1_3" class="jstree-node  jstree-leaf" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" style="background-image: url(https://jstree.com/tree-icon.png); background-size: auto; background-position: 50% 50%;"></i>custom
                                                                                                                                                                                                                                                                                                                                                                                icon URL</a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;opened&quot; : true }" aria-expanded="true" id="j1_4" class="jstree-node  jstree-open" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>initially open
                                        </a>
                                        <ul role="group" class="jstree-children">
                                            <li role="treeitem" id="j1_5" class="jstree-node  jstree-leaf jstree-last">
                                                <i class="jstree-icon jstree-ocl"></i>
                                                <a class="jstree-anchor" href="#">
                                                    <i class="jstree-icon jstree-themeicon"></i>Another
                                                                                                                                                                                                                                                                                                                                                                                                                                        node</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;glyphicon glyphicon-leaf&quot; }" id="j1_6" class="jstree-node  jstree-leaf jstree-last">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon glyphicon glyphicon-leaf jstree-themeicon-custom"></i>Custom
                                                                                                                                                                                                                                                                                                                                                                                icon class (bootstrap)</a>
                                    </li>
                                </ul>
                            </li>
                            <li role="treeitem" id="j1_7" class="jstree-node  jstree-leaf jstree-last">
                                <i class="jstree-icon jstree-ocl"></i>
                                <a class="jstree-anchor" href="https://www.jstree.com">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node
                                                                                                                                                                                                                                                                                                                        2</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Default Card Example -->
            <div class="card mb-4">
                <div class="card-header">
                    Fonctions métiers
                </div>
                <div class="card-body">
                    <div id="jstree3">
                        <ul>
                            <li>
                                <i class="jstree-icon jstree-ocl"></i>
                                <a href="#">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node 1</a>
                                <ul>
                                    <li>
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor  jstree-clicked" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>
                                            <em>initially</em>
                                            <strong>selected</strong>
                                        </a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;https://jstree.com/tree-icon.png&quot; }" id="j1_3" class="jstree-node  jstree-leaf" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" style="background-image: url(https://jstree.com/tree-icon.png); background-size: auto; background-position: 50% 50%;"></i>custom
                                                                                                                                                                                                                                                                                                                                                                                icon URL</a>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;opened&quot; : true }" aria-expanded="true" id="j1_4" class="jstree-node  jstree-open" aria-selected="false">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon"></i>initially open
                                        </a>
                                        <ul role="group" class="jstree-children">
                                            <li role="treeitem" id="j1_5" class="jstree-node  jstree-leaf jstree-last">
                                                <i class="jstree-icon jstree-ocl"></i>
                                                <a class="jstree-anchor" href="#">
                                                    <i class="jstree-icon jstree-themeicon"></i>Another
                                                                                                                                                                                                                                                                                                                                                                                                                                        node</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li role="treeitem" data-jstree="{ &quot;icon&quot; : &quot;glyphicon glyphicon-leaf&quot; }" id="j1_6" class="jstree-node  jstree-leaf jstree-last">
                                        <i class="jstree-icon jstree-ocl"></i>
                                        <a class="jstree-anchor" href="#">
                                            <i class="jstree-icon jstree-themeicon glyphicon glyphicon-leaf jstree-themeicon-custom"></i>Custom
                                                                                                                                                                                                                                                                                                                                                                                icon class (bootstrap)</a>
                                    </li>
                                </ul>
                            </li>
                            <li role="treeitem" id="j1_7" class="jstree-node  jstree-leaf jstree-last">
                                <i class="jstree-icon jstree-ocl"></i>
                                <a class="jstree-anchor" href="https://www.jstree.com">
                                    <i class="jstree-icon jstree-themeicon"></i>Root node
                                                                                                                                                                                                                                                                                                                        2</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div
            class="col-md-9">
            <!-- Default Card Example -->
            {% block cardnavigation %}
                <div class="card" id="card-graph-treemap">
                    <div class="card-header">Treemap</div>
                    <div class="card-body" id="treemap">
                        <nav>
                            <div class="up" id="graph-btn-previous">
                                <input class="btn btn-secondary" type="button" value="Précédent">
                            </div>
                        </nav>
                        <div id="treemap-body"></div>
                    </div>
                </div>
                <div class="card" id="card-graph-donuts">
                    <div class="card-header">Donuts</div>
                    <div class="card-body">
                        <div id="donuts-body"></div>
                    </div>
                </div>
                <div class="card" id="card-graph-list">
                    <div class="card-header">Liste</div>
                    <div class="card-body">
                        <div class="container">
                            <div class="panel">
                                <button id="loadData" class="btn btn-default">Load Data</button>

                                <table id="dataTable" class="display" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Children</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            {% endblock %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascriptsp %}
<script src="{{asset('js/lib/jquery.easing.min.js')}}"></script>
<script src="{{ asset('js/lib/d3.v5.min.js') }}"></script>
<script src="{{ asset('js/lib/jstree.min.js') }}"></script>
<script src="{{ asset('js/jstree.js') }}"></script>
<script src="{{ asset('js/treemap.js') }}"></script>
<script src="{{ asset('js/donuts.js') }}"></script>
<script src="{{ asset('js/arbo.js')}}"></script>
<script src="{{ asset('js/datatables.min.js')}}"></script>


<script>
        function selectTreemap() {
        $( '#treemap-body').empty();
        $('#card-graph-treemap').show();
        $('#card-graph-donuts').hide();
        $('#card-graph-list').hide();

        d3.json('/data/treemap').then(function (data) {
            console.log(data);
            showtreemap(data, "#treemap-body");
        });
    }
        function selectDonuts() {
        $( '#donuts-body').empty();
        $('#card-graph-treemap').hide();
        $('#card-graph-donuts').show();
        $('#card-graph-list').hide();

        d3.json('/data/donuts').then(function (data) {
            console.log(data);
            donuts(data, '#donuts-body');
        });
    }
        function selectList() {
        $('#card-graph-donuts').hide();
        $('#card-graph-treemap').hide();
        $('#card-graph-list').show();

        $('#dataTable').DataTable({
            ajax: {
                url: '/data/list',
                dataSrc: 'data'
            },
            columns: [
                {
                    data: 'name'
                }, {
                    data: 'children'
                }]
        });
    }

    $("input[name='graph']").change(function () {
        var checkedValue = $("input[name='graph']:checked").val();
        switch (checkedValue) {
            case "treemap":
                selectTreemap();
                break;
            case "donuts":
                selectDonuts();
                break;
            case "list":
                selectList();
                break;
            default:
                console.error(`Unknown value for graph radio button {checkedValue}`);
            }
        });

        $( document ).ready(function() {
        selectTreemap();
        });
    </script>

{% endblock %}

I search for long time the solution but don’t find the correct issue.
Thank you for your help

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *