OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Child rectangles being drawn behind the parent in d3.treemap

  • Thread starter Thread starter FO1234
  • Start date Start date
F

FO1234

Guest
I am using d3.treemap to draw a treemap for the following data:

Code:
0: root, value:40
  1: soon1, value:30
    2: soon2, value:20
      3: leaf3, value:10
      3: leaf4, value:10
    2: leaf2, value:10
  1: leaf1, value:10

When using d3.hierarchy to transform my data, I ordered it as suggested by documentation, however, leaves 3 and 4 do not appear in my treemap. The rectangles have been created, as can be seen by inspecting the svg, but they are likely behind the parent rectangle.

How can I prevent this from happening?

Below is an observable with the code used to draw and also to manipulate the data: https://observablehq.com/d/9f4232ce36bb6704

Command used to create the hierarchy:

Code:
d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.height - a.height || b.value - a.value)

Final image

<p>I am using d3.treemap to draw a treemap for the following data:</p>
<pre><code>0: root, value:40
1: soon1, value:30
2: soon2, value:20
3: leaf3, value:10
3: leaf4, value:10
2: leaf2, value:10
1: leaf1, value:10
</code></pre>
<p>When using d3.hierarchy to transform my data, I ordered it as suggested by <a href="https://d3js.org/d3-hierarchy/hierarchy#node_sort" rel="nofollow noreferrer">documentation</a>, however, leaves 3 and 4 do not appear in my treemap. The rectangles have been created, as can be seen by inspecting the svg, but they are likely behind the parent rectangle.</p>
<p>How can I prevent this from happening?</p>
<p>Below is an observable with the code used to draw and also to manipulate the data:
<a href="https://observablehq.com/d/9f4232ce36bb6704" rel="nofollow noreferrer">https://observablehq.com/d/9f4232ce36bb6704</a></p>
<p>Command used to create the hierarchy:</p>
<pre><code>d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value)
</code></pre>
<p><a href="https://i.sstatic.net/bYrV39Ur.png" rel="nofollow noreferrer">Final image</a></p>
 

Latest posts

Top