How to Enter CSS Values?

D3
1

Hi,

I am trying to recreate an old MBostock Gist Collapsible Force Layout (github.com).

You can see my effort here Copy of M Bostock Gist - Collapsible Force Graph / brettforbes | Observable (observablehq.com)

I have managed to recreate most of it, but i am not sure how to handle the css values.

How do i get something like this into a cell?

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

I want to know how to finish off the copy properly before i start to alter it.

Note I think the data model choice of a tree data model may not be optimal, and perhaps we may be able to process a nodes and edges data model to define hierarchies by following the direction of edges, from sources to targets in order to evaluate DAGs out of a fully connected graph.

Anyway, let’s get the CSS bit fixed first.

Can you help?

Also can you make a change to your documentation to describe how to use CSS please? It seems to be an omission

1 Like
2

Place a style element containing your CSS within an HTML cell. Thus:

<style>
  .node circle {
    cursor: pointer;
    stroke: #3182bd;
    stroke-width: 1.5px;
  }
</style>
1 Like