Hi,

> SVG is a whole lot easier to manage in JavaScript. If for no other reason,
> you've got access to the D3 libraries. 

I would strongly concur with David Adams point that you want to manage SVG with 
javaScript instead of the 4D language. This is an object oriented scheme, and 
its pretty difficult to work with if you don’t have an object oriented language 
to work with it. The D3 libraries or some other library are important too, but 
the language itself is truly important.


> * He's also pretty into that freight-car-function style from jQuery which I
> hated on sight. But it does make it easier to set a ton of properties
> legibly in a compact space. Virtually everything in D3 is set to return in
> a way that supports this syntax so, yeah, be aware of that.


This style is really just accepting a single hierarchical object of parameters. 
You can write code that defines attributes in objects in a lot of different 
ways in javaScript. I’d recommend to anyone that they spend some time 
considering a coding style that appeals to them and always try to do it the 
same way. The syntax the library’s examples shows you is not mandatory. Its 
just a javascript object, and as long as you respect the underlying 
architecture of that object, you can use whatever syntax you prefer. 


Regarding SVG scaling, I haven’t specifically used D3, but I’m sure it makes 
scaling issues easier. However, scaling in SVG is still something that requires 
you to think through the relationships of your objects. It isn’t magic, and it 
can’t guess what you have in mind.

Consider the scheme on a 4D form. In 4D, the form itself and the objects have 
sizing parameters (none/move/grow). Splitters can provide additional control. 
Its a nice, simple scheme. However, if you don’t bother to set these 
parameters, you don’t get the scaling you want.

A few years ago, I worked out an HTML layout scheme using a different 
javascript library, Raphael. I wrote a code library so that I could set 
move/grow parameters just like 4D provides in its forms, which I think is a 
pretty smart scheme. I haven’t done anything with it for quite a while, but I’m 
still hosting a demo, so you can check it out:

http://www.svglayout.com/svglayout/index.html 
<http://www.svglayout.com/svglayout/index.html>

When you get there, click on the SL widget in the upper right corner to 
activate the editor. You will see object outlines and handles and can drag 
objects around. You can also double click on an object to see the sizing and 
scaling attribute dialog. The whole site you see is built using an SVG based 
layout scheme. Traditional HTML layout strategies are not used.



Tom DeMeo







> ------------------------------
> 
> Message: 5
> Date: Wed, 20 Sep 2017 09:02:08 +1000
> From: David Adams <dpad...@gmail.com>
> To: 4D iNug Technical <4d_tech@lists.4d.com>
> Subject: Re: SVG Scale
> Message-ID:
>       <CAPXPcQuGQLLuErPSzmzZwOLy0192z0WcHBS2BisfA6r8Kf3K=a...@mail.gmail.com>
> Content-Type: text/plain; charset="UTF-8"
> 
> SVG is a whole lot easier to manage in JavaScript. If for no other reason,
> you've got access to the D3 libraries. In V4, Mike Bostock wen to a lot of
> effort to break bits out into stand-alone libraries to make reuse easier
> without the whole D3 environment, and to encourage contributions from other
> people. One of the core features of D3 is the scale:
> 
> https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
> 
> And a couple of examples from Mr. Bostock:
> 
> Quantile, Quantize, Threshold Scales
> http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e
> 
> Linear & Ordinal Scales
> https://bl.ocks.org/pstuffa/c37d059efa1501d33913d63ffe3585db
> 
> It's super powerful. Like most things D3, you define an object that is
> implemented using JavaScript's (very nice) closures.So, you end up with an
> object that can perform scaling operations. The object can be passed around
> as a parameter and it can be invoked as such. What's nice about the closure
> in this case is that you can manufacture a whole bunch of different scales
> - you set the values when you build your scaling object. Then you pass the
> pre-defined scale object, as needed. The object caries the scaling function
> internally. It's very tidy and very powerful. There's nothing remotely
> similar in the 4D language, so there's no way to make a meaningful metaphor
> for this sort of structure.
> 
> Scales in D3 can be of all sorts of different types, including ordinal,
> continuous, and sequential. If you need animations, I think that the
> interpolation features lock in here too. It takes a bit of time to get your
> head around D3 scales, or at least it did for me when I was using D3
> heavily, but after that, they're a snap. No more hassles.  Super powerful
> and super easy, once you've got the hang of it.
> 
> Notes:
> * Mike Bostock's JavaScript relies heavily on anonymous functions. I don't
> really get it why JS people love them so much. But M. Bostock is way
> smarter than likely anyone I've met, so I figure roll with it.
> 
> * He's also pretty into that freight-car-function style from jQuery which I
> hated on sight. But it does make it easier to set a ton of properties
> legibly in a compact space. Virtually everything in D3 is set to return in
> a way that supports this syntax so, yeah, be aware of that.
> 

**********************************************************************
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**********************************************************************

Reply via email to