Most libraries provide limited customization of the Sankey chart (like node color, width, padding).
Default Sankey chart (d3):
But what if I need to change node heights and center the nodes vertically? How I can do that?
My requirements:
Can anyone help me?
Slightly hacky, but you could override the CSS rules to style the elements however you wish.
For example, if I have a d3-generated Sankey chart within a div named "sankey", I can add these CSS rules to change the rect elements to red, and the path elements that form the links to blue.
From some very brief testing, the rect elements seem to require the "!important" CSS modifier, hence the comment about it seeming a little hacky:
#sankey > svg > g > g > g > rect {
fill: red !important;
}
#sankey > svg > g > g > path {
stroke: blue;
stroke-opacity: 0.7;
}
To make the rects larger, you could possibly set their stroke color to be the same as the fill, and set the stroke width to something large, and then play with the "nodePadding" parameter in the d3 API.
I've attached a screenshot of what I got to work by playing with these:
Without watching your code - it is a guessing game. So, I assume, you've used examples of sankey D3.js in the internet that are pretty much sharing same code. At some point you could see something like this:
var sankey = d3.sankey()
.nodeWidth(12)
.nodePadding(12)
.size([width, height]);
Please, try to fiddle around with nodeWidth (enlarge the value) to get what you're after.
Related
I am trying to zoom in on parts of a line chart using viewBox. I managed to get it working, however, not sure how to deal with the fact that everything scales accordingly (line path also becomes larger).
What I am looking for is for the line to stay constant while zoom is happening. I researched that there is also a way with translation and scale, but not sure how to implement it.
Also, not sure how to make this behavior more automatic. For example, I am zooming in on a range between two years: 2010 and 2011. Currently, I specify the y value manually. But ideally, this would be specified in using yScale function.
Any help would be appriciated!
Here is my repl: https://svelte.dev/repl/be0df7e353334108b3d432d5c82a6cd3?version=3.38.2
One way to accomplish this is by scaling the viewBox of the <svg> element.
You can do this by binding the x, y, width and height of the viewBox.
<svg ... viewBox="{x} {y} {width} {height}">
You can also tween the viewbox changes:
By using Svelte's tweened() store for x, y, width, height. ie <svg viewBox="{$x} {$y} {$width} {$height}">
Or by using SVG's <animate> element. ie <animate attributeName="viewBox" values="..." dur="2s"/>
I'm trying to build a directed line graph in D3 with the ability to use a linear scale in D3 with domain [-1,0,1] and range ["red","yellow","green"] to set the color of edges as a representation of speed between nodes. I am new to D3, JS, and programming in general, so I'm sure I'm missing something obvious, but is there a way that I can call the values in this color array:
var color = d3.scale.linear()
.domain([-1, 0, 1])
.range(["red", "yellow", "green"]);
Within the style section where I declare the actual colors of the lines? Example of what I've tried, where I've declared 10 link types and I'm trying to pass a color element into them.:
path.link.onezero {
stroke: color(-0.5);
}
Does not work, and returns a blank line.
path.link.twozero {
stroke: #000;
}
Does work, and returns a black line.
Obviously, I'm probably attacking this problem the wrong way and would like to be able to create these lines without having to resort to discrete declarations of style elements within the style section, but rather have one style element with the style section and have its properties determined dynamically by my script - I just have no idea how to do this.
Thank you!
You have to call color function inside javascript code as shown below.
d3.selectAll("path.link.onezero")
.style("stroke",color(-0.5));
I have been experimenting with a simple d3 google analytics-style area graph demo. I'd like to make it stretch to the full width of its container, which I have managed to do. However the little circles are of course stretching out of shape too. I'd like their positions to be responsive, but not their dimensions (so they remain circular).
Fiddle link: http://jsfiddle.net/46PfK/2/
I'm trying to use the SVGPanUnscale.js script. I have tried calling it with unscaleEach('.dot'); and [].forEach.call($('.dot'),unscale); but neither appear to do anything.
This example is responsive in a similar way to mine and uses the script to 'unscale' the axis labels: http://meloncholy.com/static/demos/responsive-svg-graph-1/
This example also uses circle elements:
http://phrogz.net/svg/scale-independent-elements.svg
I looked at solutions involving the css attribute:
circle {
vector-effect: non-scaling-stroke;
}
which created a circular stroke on an ellipse - weird.
A CSS solution would be preferable to a JS one, provided it works across browsers.
Any suggestions?
Thanks to #leMoisela for pointing me in the right direction. I fixed my issue nicely using JS to redraw the graph on resize:
http://jsfiddle.net/46PfK/4/
window.onresize = function(e){
draw_graph();
};
There's a good example on resizing with D3 https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/
After you update your scales, only thing left to resize your circles would be something like this:
/* Force D3 to recalculate and update the points */
svg.selectAll('circle')
.attr('cx', function (d) { return xScale(d.x); })
.attr('cy', function (d) { return yScale(d.y); })
.attr('r', 4);
I want to create a sphere in Raphael which should look like
I am using Paper.ellipse with equal horizontal and vertical radius to draw sphere.
I think I need to tweak fill attribute to achieve effect as shown in image. Also I want sphere in different color with same effect.
Can anybody point out any helpful link about fill property in Raphael as I couldn't find enough information?
Used
function ball(x, y, r, colour) {
paper.ellipse(x, y, r, r).attr({
fill: "r(.3,.25) white-" + colour,
stroke: "none"
});
};
You can use any color like yellow or color code like #00CC33 for hue.
Demo.
Demo Source Code.
You can watch the source of this page: http://raphaeljs.com/ball.html. Basically, it consists in drawing several ellipses to simulate a single enlightened sphere.
You can learn more about gradient in Raphael on this topic.
Using jVectorMap on a site and would like to change the stroke color of state borders within the USA map. Have tried inserting a stroke color within each states coords within the path to no avail.
Has anyone been able to do such thing?
Appears you can add the stroke in the stylesheet.
.jvectormap-region {
stroke: white;
stroke-width: 2;
}
Unfortunately you can't achieve this easily now without modifying the code of the jVectorMap.
Just add the following code around line 123 of jquery.vector-map.js:
node.setAttribute('d', config.path);
node.setAttribute('stroke', '#000000'); // Whatever color you like!
node.setFill = function(color)...
Greetings!
Another question: my VML Fallback doesn't seem to work. The path coordinates are from an SVG created by Adobe Illustrator. Has anyone the same problem or can give me a solution which programm to use to create the path data?