CODEWITHSUNDEEP
javascriptsvgjointjs
Shady
Shady

Reputation: 804

JointJS - Using router on links behaves weird

As long as I don't use any routers or the attribute smooth on my links, everything is drawn correctly. Normal behavior without router

Now I wanted to use the manhattan router and things started to get weird. Every link is drawn as a filled element instead of a simple line.

It seems to me that something else does modifications on the links which somehow interferes. Activated manhattan router

Furthermore attributes like link.attr({'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }}) are completely ignored. The black arrow heads are still shown.

Any ideas?

Upvotes: 3

Views: 1019

Answers (4)

Adrian Grzywaczewski
Adrian Grzywaczewski

Reputation: 888

I am using joint.js library in react.js application and I encountered the same issue. Indeed the problem was with the missing styles.

In my package.json the joint.js library is declared just like that: "jointjs": "^2.2.1", In order to add styles, I had to add the following line to import styles: import "../../node_modules/jointjs/css/layout.css";

Upvotes: 1

sujata
sujata

Reputation: 16

I have added display: none; to .link-tools and it worked for me.

Upvotes: 0

Roman
Roman

Reputation: 1674

JointJS library core files are joint.js and joint.css. Please make sure that none of them is missing.

JointJS + dependencies (jQuery, lodash, backbone)

<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

Upvotes: 5

mark worts
mark worts

Reputation: 11

I had to add fill:none to both .connection-wrap and .connection to clean up.

Upvotes: 1

Related Questions