🏠 back to Observable

Initial Load Issues & Translate SVG Elements

Hello, I have run into two problems with the following notebook.

  1. Upon loading the notebook, the column names I have added (text id=“columns”) all show at the [0,0] position although I base their x-positioning on finding the unique dx values of the rectangles. The positioning is corrected only when the first cell is run. Is this an order of operations issue? On a separate note, performance is poor (slow mouseovers) if the initial cell is not run and improves once run.
    Update: I do see an error in the console upon initial load of the notebook:
    Error: <text> attribute x: Expected length, "NaN".

  2. How can I translate the SVG so that the column names are not cut off? I was thinking I could add an ID attribute to each group (Nodes, Paths, Text) and then translate each but that seemed over-complicated. I was wondering if there’s a better solution?
    Update: I ended up translating each group element (for the nodes/paths/text down in order to fit the column names

To fix these issues:

  1. I was capturing the dx attributes of the nodes at first with: d3.selectAll("rect") which was fixed when I switched the line to svg.selectAll("rect")

  2. I added a transform attribute to each relevant grouping with .attr("transform", "translate(0,10)") which allowed me space to fit the column names on the visual.

2 Likes