Default shape and style

[Emptyfruit]

Is there a way to set the default shape and style for the diagram? I could not figure it out from the docs. If not, i think it is an important feature to be added.

Now, the default shape is a rectangle. If i need a simple diagram with ten connected circles, i'd have to add ten extra lines of code changing the shape of each one. And then the same with style to make them all green.

[alixander]

the way to do this in D2 will be with globs. it's being worked on.

*: {
  shape: circle
}

[artukn]

Just out of curiosity, how will we set defaults for connections?

[alixander]

* -> *: {
  style.stroke: red
}

[the42]

It would be great to be able to specify that if the left side of a connection is of class sql_table and the right side of the connection is of type sql_table, then use the following decorators, something in the lines of

*.class[sql_table] -> *.class[sql_table] : {
  // meaningful 1:n ER-diagram decorators
}

[bo-ku-ra]

would this and "import" be a replacement for themes?
can i create my own theme? (#875)

[alixander]

@nhooyr pretty interesting for globs: #1327 (comment)

[alixander]

@the42 it'll be done like so:

* -> *: {
  &dst.class: sql_table
  &src.class: sql_table
  style.opacity: 0.4
}

[alixander]

@bo-ku-ra that's a good point. theming currently has some rules for depth, but the selectors with globs should be able to get that too, so in theory, yeah this can completely cover themes.

it should actually be more powerful than themes. because you can do things themes don't control, like adding borders etc

Technically, themes are dictated by color codes:

vars is currently under development and should be coming in the next release or so (#105). you should be able to customize themes by setting these codes.

$N1: "#fff"
...

[the42]

@the42 it'll be done like so:

* -> *: {
  &dst.class: sql_table
  &src.class: sql_table
  style.opacity: 0.4
}

Maybe my intention and your draft fulfil a different purpose though?

• My use-case: If source and destination are of shape-type sql_table (I wrongly said class, but meant shape-type), then use the following styling information, enclosed in { ... }. Here [...] serves as s selector which only matches if source and destination are of shape type sql_table. In spirit as seen in https://d2lang.com/tour/classes#multiple-classes, logo.class: [d2; sphere] where it is used for assignment, whereas I was thinking of a selector.
• Your use-case seems to be: assign source and destination to shape type sql_table and style the link with opacity 0.4

I know this is WIP and I might as well misinterpret your intention.

[alixander]

Your use-case seems to be: assign source and destination to shape type sql_table and style the link with opacity 0.4

@the42 the use-case is as you describe. & is basically, "for the glob to match, this also needs to be true". It's an idea from CSS preprocessors: https://css-tricks.com/the-sass-ampersand/

[bo-ku-ra]

does it work on v0.6.0?
#1327 (comment)

[alixander]

@bo-ku-ra not quite yet, but it will in 0.6.1 which will come this week hopefully.

Right now, globs behavior only applies only to existing shapes.

a
b
*.shape: circle
c

c won't be a circle above.

We plan to change it so that globs are lazy-evaluated and applied to each shape as they come in, so you can define the glob at the top, and a, b, c will become circles as they come in

[bo-ku-ra]

i understand that d2 is not an interpreter language.
right?

and

does it work on v0.6.0?
#1327 (comment)

[the42]

It would be great to be able to specify that if the left side of a connection is of class sql_table and the right side of the connection is of type sql_table, then use the following decorators, something in the lines of

*.class[sql_table] -> *.class[sql_table] : {
  // meaningful 1:n ER-diagram decorators
}

As globs came a far way, I am aware of * -> *: 👉 as well as Filter Statements.

Given that, how would I style ->-relations, when both sides are of classshape sql_table?

Does direction -> vs. <- matter in this regard?