Links between nodes not showing up.

[IndraPriyaDarshini]

Hi,
I'm using dagre-d3 with angular 8 and following are the issues I'm facing

Problems:
Links are not appearing between the nodes.
Labels on the nodes are not visible.

https://codesandbox.io/s/angular-graph-kq2nb

[gordonwoodhull]

Looks like the demos rely on CSS to make this stuff visible. See e.g.

dagre-d3/demo/interactive-demo.html

Lines 20 to 39 in 397c2a9

	.node rect,
	.node circle,
	.node ellipse {
	stroke: #333;
	fill: #fff;
	stroke-width: 1.5px;
	}
	.cluster rect {
	stroke: #333;
	fill: #000;
	fill-opacity: 0.1;
	stroke-width: 1.5px;
	}
	.edgePath path.path {
	stroke: #333;
	stroke-width: 1.5px;
	fill: none;
	}

[IndraPriyaDarshini]

Hi Gordonwoodhull,

I tried your suggestion but problem still exists.

https://codesandbox.io/s/angular-graph-kq2nb

In the above link open the app folder under src folder where we can find the actual code.

app.component.css for CSS and app.component.ts for TS

[gordonwoodhull]

Huh? Your link shows a graph with links and node labels visible.

[IndraPriyaDarshini]

Hmm. May I know in which browser you are viewing it.

I'm not able to see the above graph in Chrome.

https://codesandbox.io/s/angular-graph-kq2nb

[gordonwoodhull]

Must be some caching issue.

Anyway, that is definitely how to get the nodes and links to show in dagre-d3. Figuring out how to get CSS to correctly apply inside of Angular and codesandbox.io is out of scope for this repo.

In Chrome, Firefox, and Safari, pasting the following CSS into styles.css, and then pressing enter, will work:

.node rect {
  stroke: #333;
  fill: #fff;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}

Probably Angular transforms the CSS in app.component.css in some way that makes it not work.

[IndraPriyaDarshini]

Ok. Figured it out. Need to put encapsulation: ViewEncapsulation.None

https://codesandbox.io/s/angular-graph-kq2nb

Thank you for the quick help.