Trouble with laying two SVG Treemaps on one page. (with D3.js)

Hello,
I am new to D3.js and I had trouble laying two SVG Treemaps on one page.
I got a hint from this.

What I want to do is lay two zoomable treemap elements on one page. (The sample above is for one treemap.)
I implemented the code myself, but not…


This content originally appeared on DEV Community and was authored by Lucas Lim

Hello,
I am new to D3.js and I had trouble laying two SVG Treemaps on one page.
I got a hint from this.

What I want to do is lay two zoomable treemap elements on one page. (The sample above is for one treemap.)
I implemented the code myself, but not working properly.

Image description

Please help me if you are familiar with SVG and have experience with the zoomable D3 treemap.

chart1.js

fetch('../data/chart1.json')
  .then((response) => response.json())
  .then((json) => {
    render(json, 'investicija');
    render(json, 'proizvod');
  })
  .catch((error) => console.error('Error fetching data:', error));

function render(treemapData, selector) {
  const renderData = treemapData[selector][0]; // Ensure this key exists in your JSON data

  (function () {
    const margin = { top: 20, right: 0, bottom: 0, left: 0 };
    const container = document.getElementById(selector);
    const width = container.clientWidth;
    const height = container.clientHeight;

    let svg, grandparent, scaleX, scaleY, treemap;

    function createSvg() {
      scaleX = d3.scale.linear()
        .domain([0, width])
        .range([0, width]);

      scaleY = d3.scale.linear()
        .domain([0, height])
        .range([0, height]);

      treemap = d3.layout.treemap()
        .children((d, depth) => depth ? null : d._children)
        .sort((a, b) => a.amount - b.amount)
        .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
        .round(false)
        .value(d => d.value);

      svg = d3.select(`#${selector}`).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.bottom + margin.top)
        .style("margin-left", -margin.left + "px")
        .style("margin-right", -margin.right + "px")
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .style("shape-rendering", "geometricPrecision");

      grandparent = svg.append("g")
        .attr("class", "grandparent");

      grandparent.append("rect")
        .attr("y", -margin.top)
        .attr("width", width)
        .attr("height", margin.top + 10);

      grandparent.append("text")
        .attr("x", 25)
        .attr("y", 6 - margin.top + 3)
        .attr("dy", ".75em");
    }

    function initialize(d) {
      d.x = d.y = 0;
      d.dx = width;
      d.dy = height;
      d.depth = 0;
    }

    function accumulate(d) {
      return (d._children = d.children) ? d.amount = d.children.reduce((p, v) => p + accumulate(v), 0) : d.amount;
    }

    function layout(d) {
      if (d._children) {
        treemap.nodes({ _children: d._children });

        d._children.forEach(c => {
          c.x = d.x + c.x * d.dx;
          c.y = d.y + c.y * d.dy;
          c.dx *= d.dx;
          c.dy *= d.dy;
          c.parent = d;
        });
      }
    }

    function display(d) {
      grandparent
        .datum(d.parent)
        .on("click", transition)
        .select("text")
        .text(selector);

      const g1 = svg.insert("g", ".grandparent")
        .datum(d)
        .attr("class", "depth");

      const g = g1.selectAll("g")
        .data(d._children)
        .enter().append("g");

      g.filter(d => d._children)
        .classed("children", true)
        .on("click", transition);

      g.append("rect")
        .attr("class", "parent")
        .call(rect)
        .style("fill", d => d.color)
        .append("title")
        .text(d => d.fullname);

      g.selectAll(".child")
        .data(d => {
          layout(d);
          return d._children || [d];
        })
        .enter().append("rect")
        .attr("class", "child")
        .call(rect);

      g.append("text")
        .classed("overlaidText1", true)
        .text(d => d.name)
        .call(middletext1);

      g.append("text")
        .classed("overlaidText", true)
        .text(d => d.text)
        .call(middletext);

      function transition(d) {
        if (!d || this.transitioning) return;
        this.transitioning = true;

        const g2 = display(d),
          t1 = g1.transition().duration(1000),
          t2 = g2.transition().duration(1000);

        scaleX.domain([d.x, d.x + d.dx]);
        scaleY.domain([d.y, d.y + d.dy]);

        svg.style("shape-rendering", null);

        svg.selectAll(".depth").sort((a, b) => a.depth - b.depth);

        g2.selectAll("text")
          .style("fill-opacity", 0);

        t1.selectAll("text:not(.overlaidText)").call(middletext1).style("fill-opacity", 0);
        t2.selectAll("text:not(.overlaidText)").call(middletext1).style("fill-opacity", 1);
        t1.selectAll(".overlaidText").call(middletext).style("fill-opacity", 0);
        t2.selectAll(".overlaidText").call(middletext).style("fill-opacity", 1);
        t1.selectAll("rect").call(rect);
        t2.selectAll("rect").call(rect);

        t1.remove().each("end", () => {
          svg.style("shape-rendering", "geometricPrecision");
          this.transitioning = false;
        });
      }

      return g;
    }

    function text(text) {
      text.attr("x", d => scaleX(d.x) + 6)
        .attr("y", d => scaleY(d.y) + 2);
    }

    function middletext(text) {
      text.attr("x", d => scaleX(d.x + d.dx / 2))
        .attr("y", d => scaleY(d.y + d.dy / 2) + 18);
    }

    function middletext1(text) {
      text.attr("x", d => scaleX(d.x + d.dx / 2))
        .attr("y", d => scaleY(d.y + d.dy / 2) - 3.5);
    }

    function rect(rect) {
      rect.attr("x", d => scaleX(d.x))
        .attr("y", d => scaleY(d.y) - 6)
        .attr("width", d => {
          const x0 = scaleX(d.x);
          const x1 = scaleX(d.x + d.dx);
          const w = x1 - x0;
          console.log(`Width for ${d.name} in ${selector}: x0=${x0}, x1=${x1}, width=${w}`);
          return w;
        })
        .attr("height", d => scaleY(d.y + d.dy) - scaleY(d.y))
        .attr("rx", "0px");
    }


    // Debug logs
    createSvg();
    initialize(renderData);
    accumulate(renderData);
    layout(renderData);
    display(renderData);
  })();
}

chart1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>D3-Stacked-Bar-Chart (Percentage)</title>
    <link href="css/chart1.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div>
        <div id="investicija" style="display: inline-block; width: 500px; height: 300px;"  ></div>
        <div id="proizvod" style="display: inline-block; width: 500px; height: 300px;"></div>
    </div>
</body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script/chart1.js" charset="utf-8"></script>

</html>

chart1.json

{
    "investicija": [
        {
            "value": 3500000,
            "kvadrata": 1880,
            "invest_kvadrat": 1862,
            "description": "<p class='desc'>Opis investicije:<br>Stambena zgrada...</p>",
            "children": [
                {
                    "name": "PLAC",
                    "value": 1300000,
                    "image": "some_image.jpg",
                    "link": "http://somelink.com?id=1",
                    "color": "#6060e0"
                },
                {
                    "name": "SOFTCOST",
                    "value": 300000,
                    "color": "#ff8259",
                    "children": [
                        {
                            "name": "Nadzor",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?id=1",
                            "value": 100000
                        },
                        {
                            "name": "Dozvola",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?id=1",
                            "value": 100000
                        },
                        {
                            "name": "Direkcija",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?id=1",
                            "value": 100000
                        }
                    ]
                },
                {
                    "name": "HARDCOST",
                    "value": 1900000,
                    "color": "#fff214",
                    "image": "some_image.jpg",
                    "link": "http://somelink.com?id=1",
                    "children": [
                        {
                            "name": "Izvodjenje",
                            "value": 600000,
                            "children": [
                                {
                                    "job_id": "1",
                                    "name": "Obezbedjenje temeljne jame",
                                    "value": 200000,
                                    "izvodjac": "InKop",
                                    "izvodjac_id": 21,
                                    "trajanje": 33,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "rok": "20-12-2024"
                                },
                                {
                                    "job_id": "2",
                                    "name": "Iskop",
                                    "value": 200000,
                                    "izvodjac": "InKop",
                                    "izvodjac_id": 21,
                                    "trajanje": 33,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "rok": "20-12-2024"
                                },
                                {
                                    "job_id": "3",
                                    "name": "Temeljna ploca",
                                    "value": 200000,
                                    "izvodjac": "InKop",
                                    "izvodjac_id": 21,
                                    "trajanje": 33,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "rok": "20-12-2024"
                                }
                            ]
                        },
                        {
                            "name": "Materijal",
                            "value": 1300000,
                            "children": [
                                {
                                    "order_id": "3",
                                    "name": "Armaturna mreza",
                                    "value": 300000,
                                    "dobavljac": "Metal metal",
                                    "dobavljac_id": 22,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "isporuka": "20-12-2024"
                                },
                                {
                                    "order_id": "3",
                                    "name": "Plocice",
                                    "value": 300000,
                                    "dobavljac": "RA KERAMIKA",
                                    "dobavljac_id": 21,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "isporuka": "20-12-2024"
                                },
                                {
                                    "order_id": "3",
                                    "name": "Lepak za fasadu",
                                    "value": 700000,
                                    "dobavljac": "ROMA",
                                    "dobavljac_id": 25,
                                    "image": "some_image.jpg",
                                    "link": "http://somelink.com?job_id=1",
                                    "isporuka": "20-12-2024"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "proizvod": [
        {
            "value": 5100000,
            "kvadrata": 1880,
            "invest_kvadrat": 2712,
            "children": [
                {
                    "name": "Stanovi",
                    "kvadrata": 1284,
                    "komada": 21,
                    "color": "#6060e0",
                    "children": [
                        {
                            "name": "Stan 1",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "sprat": 1,
                            "kvadrata": 45.44,
                            "value": 1200000
                        },
                        {
                            "name": "Stan 2",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "sprat": 2,
                            "kvadrata": 85.5,
                            "value": 2300000
                        },
                        {
                            "name": "Stan 3",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "sprat": 2,
                            "kvadrata": 152,
                            "value": 3300000
                        }
                    ]
                },
                {
                    "name": "Lokali",
                    "kvadrata": 480,
                    "komada": 2,
                    "color": "#ff8259",
                    "children": [
                        {
                            "name": "Lokal 1",
                            "opis": "Lep s pogledom na ulicu",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "kvadrata": 152,
                            "value": 4300000
                        },
                        {
                            "name": "Lokal 2",
                            "opis": "Na 2 sprata, idealan za restoran",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "kvadrata": 152,
                            "value": 1300000
                        },
                        {
                            "name": "Lokal 3",
                            "opis": "Veliki magacin",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "kvadrata": 152,
                            "value": 1300000
                        }
                    ]
                },
                {
                    "name": "Garažna mesta",
                    "kvadrata": 980,
                    "komada": 21,
                    "color": "#fff214",
                    "children": [
                        {
                            "name": "Garažno mesto 1",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "nivo": "-2",
                            "kvadrata": 12.5,
                            "value": 20000
                        },
                        {
                            "name": "Garažno mesto 2",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "nivo": "-2",
                            "kvadrata": 12.5,
                            "value": 20000
                        },
                        {
                            "name": "Garažno mesto 3",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "nivo": "-1",
                            "kvadrata": 12.5,
                            "value": 20000
                        },
                        {
                            "name": "Garažno mesto 4",
                            "image": "some_image.jpg",
                            "link": "http://somelink.com?job_id=1",
                            "nivo": "-1",
                            "kvadrata": 12.5,
                            "value": 20000
                        }
                    ]
                }
            ]
        }
    ]
}


This content originally appeared on DEV Community and was authored by Lucas Lim


Print Share Comment Cite Upload Translate Updates
APA

Lucas Lim | Sciencx (2024-06-24T14:49:12+00:00) Trouble with laying two SVG Treemaps on one page. (with D3.js). Retrieved from https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/

MLA
" » Trouble with laying two SVG Treemaps on one page. (with D3.js)." Lucas Lim | Sciencx - Monday June 24, 2024, https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/
HARVARD
Lucas Lim | Sciencx Monday June 24, 2024 » Trouble with laying two SVG Treemaps on one page. (with D3.js)., viewed ,<https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/>
VANCOUVER
Lucas Lim | Sciencx - » Trouble with laying two SVG Treemaps on one page. (with D3.js). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/
CHICAGO
" » Trouble with laying two SVG Treemaps on one page. (with D3.js)." Lucas Lim | Sciencx - Accessed . https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/
IEEE
" » Trouble with laying two SVG Treemaps on one page. (with D3.js)." Lucas Lim | Sciencx [Online]. Available: https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/. [Accessed: ]
rf:citation
» Trouble with laying two SVG Treemaps on one page. (with D3.js) | Lucas Lim | Sciencx | https://www.scien.cx/2024/06/24/trouble-with-laying-two-svg-treemaps-on-one-page-with-d3-js/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.