Marker arrows alignment in d3.js tree diagram - javascript

I am drawing tree diagram using d3.js. I have circular nodes and my path end points are the center point of circles.
I want to add marker arrows for the paths , if I give refX and refY properties as 0 marker is aligned properly but it wont be visible since my circle will overlap that.
I refered [this][2] question and calculated refX refY according to that
But still I am not getting the arrows well oriented and when I drag the node arrows are getting messed up still more .
Currently I am using noderadius as 16 and markerwidth and height as 6 (which is configurable)
I am using radial, horizontal and vertical views for the same tree. Can anyone give me a solution to draw these arrows with proper alignment and orientation?
This is how my diagram looks

Related

How do I stop graphs appearing cropped when using D3 splines?

Our UI uses D3 and when applying splines to smooth the data we have several cropping or out of bounds issues as follows:
Spline is cropped at top of graph
Spline goes below x-axis
Any advice would be appreciated.
Use .getBoundingClientRect() on each of the set of paths to get the extreme top and bottom bounds, then adjust the axis range or the visible margins of the chart accordingly

Zoomable background for cytoscape js

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.

C3 / D3: How to add segmented benchmark overlays on top of grouped bars (vertical lines to stretch over horizontal bars)?

I'm new to this D3/C3 thing and had a project thrown my way w/ limited time to work on it and was wondering how one would go about adding vertical thresholds on top of horizontal bars as shown in the image below, using C3 / D3 charting libs.
I've got it looking pretty spot on except for that part. Any input would be helpful (if it was meant to be helpful that is).

dc.js - horizontal bar chart / row chat, or rotate d3.svg?

Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.

Avoid overlap for a set of fixed nodes

I am using d3 to draw a graph where the nodes are all fixed.
In my use case the nodes are not of the same size and they are connected using edges.
It is similar to the graph here - http://linkedjazz.org/network/
I am trying to place the nodes over the oval shape.
Here there happens a lot overlap between nodes which i want to avoid.
Is there anyway i can see if there are 2 nodes overlapping and adjust the location with my logic , so that i can place the nodes in a rightly oval shape ?

Categories