bringing svg area into visibility

[pa...@lumarit.com]

In my project, the size of svg area exceeds the dimensions of its container (a "div"). Anything painted outside the container boundaries is not visible. This is as expected.
However, I would like to re-position svg within the container, so specific part  of its area is brought into container's boundary thus it becomes visible. FireFox has scrollIntoView() method that can be called on svg element. It produces effect that is very close to what I need but not fully satisfactory. Unfortunately IE does not support it at all, so I cannot use it.

I wonder if there is anything in d3 that could help to achieve this ? If not, perhaps someone here may offer a clue how to approach this problem using native svg manipulation ? I can sense that translation and view-port could be of some help but, I guess, I've been working with svg too short to figure this out. Any help will be greatly appreciated.

[sandeep edara]

Hi Peter,

If I understand the problem correctly, you can have a look and Panning and Zooming in d3.

Should be helpful.

https://bl.ocks.org/mbostock/6123708

regards,

Sandeep.

[Curran]

Indeed, the panning and zooming example should be helpful here.

To summarize the approach that I think might work:

• Be sure to resize the SVG to match the size of the container, using a technique similar to this https://bl.ocks.org/curran/3a68b0c81991e2e94b19
• Put all the visual SVG content inside a <g> element, then move around all the elements at once by setting the "transform" attribute on the <g> element (as in the already referenced pan&zoom example https://bl.ocks.org/mbostock/6123708)

Best regards,

Curran

[Joe Keohan]

Curran,

My comment is more of a question related to the first block you posted below to resize the big X....I noticed that you are using .mergeIO...I know it's needed for the responsiveness as once removed it's no longer responsive.  I don't believe I've seen .merge before and wanted to know if this is the best approach to making line's responsive.  The D3 documentation states that d3.merge() is used to merge arrays like .concat() so I'm just trying to understand the context with how you are using it. 

Joe

[Curran]

Hi Joe,

Sure, I'd be happy to clarify.

Merge is being used there so that the function is idempotent with respect to the DOM elements it leaves behind. It's an instance of the General Update Pattern, which is documented nicely in the documentation for .merge.

Because the render function may be invoked multiple times, we don't want to just use .append(), because that would add more and more DOM elements over time. Also, we don't want to just use .enter().append(), because setting attributes on the element appended there would only take effect on the initial render. In the resize example, .merge is being used to merge together the enter and update selections. That way, whatever attributes get set on the merged selection will take effect BOTH for the initial invocation (where .enter() comes into play) AND for subsequent invocations (where .enter() is empty).

I've created a collection of examples for teaching the General Update Pattern: https://curran.github.io/d3-in-motion/#1/5/1 . You can step through these using CTRL+ARROW (or CTRL+SHIFT+ARROW for Mac users). The difference between the following two examples shows why .merge exists:

• https://curran.github.io/d3-in-motion/#1/5/8 The case for .merge() - essentially it's so we can reduce duplicated logic that gets applied to both the enter and update selections.
  
• https://curran.github.io/d3-in-motion/#1/5/9 Using .merge() - this shows the complete General Update Pattern.
  

Hope this is helpful.

Best regards,

Curran

[Joe Keohan]

Curran,

Thanks for your detailed response.   I'm still getting up to speed on v4 and wasn't aware that it's now part of the update/enter/exit methodology.    I did a little more research and found this issue ticket that m.bostock answered.  It seems there is always something ew to learn around every corner.  

Anyway appreciate the additional clarity you provided.

Joe.  

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/zKmDoJPVx-Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Joe Keohan