I'll create an interactive D3.js tree visualization that matches your requirements. This will be a vertical tree structure with zoom capabilities and the ability to add new nodes dynamically.

I've created an interactive D3.js tree visualization that matches your requirements:

Features:

1. Vertical Tree Layout: Root node at the top with branches extending downward
2. Zoom Functionality: Use mouse wheel to zoom in/out of the tree

3. Interactive Nodes:

   • Hover over any node to see it highlight and reveal a green + button
   • Click the + button to add a new "Query" node as a child
4. Visual Design: Blue circular nodes with "Query" labels, similar to your reference image
5. Smooth Animations: Hover effects and transitions for better user experience

How to Use:

• Zoom: Use your mouse wheel to zoom in and out
• Pan: Click and drag to pan around the tree (when zoomed in)
• Add Nodes: Hover over any node to see the green + button, then click it to add a new branch
• Navigation: The tree will automatically update and re-render when new nodes are added

The tree starts with a sample structure similar to your image and dynamically grows as you add new nodes. Each new node gets a unique ID and maintains the tree structure properly.

Perfect! I've updated the tree so that the + button is now always visible on every node. Here's what changed:

Key Changes:

1. Always Visible + Buttons: The green + button now appears permanently on each node, positioned in the top-right corner
2. Simplified Interaction: No more hover logic for showing/hiding buttons - they're always there and ready to use
3. Maintained Functionality: Clicking any + button still creates a new "Query" node as a child of that specific node
4. Optional Node Hover: Kept a simple hover effect on the main node circles for visual feedback

How it Works Now:

• + Buttons: Every node displays a green + button at all times
• Add Nodes: Click any + button to instantly add a new branch from that node
• Visual Feedback: Node circles still have a subtle hover effect (grow slightly and change color)
• Tree Growth: The tree dynamically updates and re-renders each time you add a new node

The interface is now more straightforward and user-friendly since users can immediately see where they can add new nodes without having to hover around to discover the functionality.