I'm trying to play with d3 network and there is an very interesting example in here. It shows the relationship between different groups by different colours. Now I'm thinking to change it by coloring the links. Ideally, I want the link color to be different by different groups. Can I achieve that by modifying the js code provided in that link?
Thanks in advance really keen to know the answer.
What about this? http://bl.ocks.org/maurizzzio/37569cdc0ed9fee40ba3
Relevant changes:
1) the stroke holds the color for a line, each link has info of the source/target nodes, to check that they belong to the same group the following check must be made: graphs.nodes[d.source].group === graphs.nodes[d.target].group but the force layout is changing the structure of graphs.links when the invoked, I could access the group using d.source.group and d.target.group, now if both groups are the same then the stroke of the line is the same as the color of source/target node
2) if not then the link is between nodes that belong to different groups, a class is added to each of these links to apply a grey stroke
.attr('stroke', function (d) {
if (d.source.group === d.target.group) {
return color(d.source.group);
} else {
d3.select(this).classed('different-groups', true);
}
})
css:
.different-groups {
stroke: #999;
}
Related
I created a sunburst chart with Highcharts. I would like a way to highlight a level, ideally by adjusting the color saturation, without affecting the color of proceeding levels.
What I've tried so far:
colorVariation(API docs)
my code example
Initially, this looked like what I needed, it adjusts the color brightness of a given level, either darkening or lightening it. Unfortunately, it only takes a to parameter, and no equivalent from, the purpose of colorVariation seems only to graduate the color from the parent color to the given brightness modifier value.
color(API docs)
my code example
color can be used to change the color of a given level, this doesn't quite meet the criteria of what I wanted as it changes each section on a level to the same color. It also causes the child levels to inherit the new color, as seen in the example. Setting colorByPoint doesn't fix this issue either as the child level will cycle through all colors rather than matching the colors set in the level 1 parent.
What I'm trying to achieve:
You can use internal Highcharts brighten method for brightening colors. Below, you can find an example of how to achieve the wanted result in your case:
chart: {
height: "600px",
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.id[0] === '1' || p.id[0] === '3') {
p.graphic.attr({
fill: Highcharts.color(p.color).brighten(0.3).get()
});
}
})
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/de3mp4tq/
I am rendering the line chart using Chartist.js I am trying to change the color of particular vertical grids but I didn't find any way to do so in the plugin.
So as seen in the image, I would like to darken the 2nd and 9th vertical grid lines. (2nd and 9th is just for an example, I will be getting indexes of the grids to be highlighted dynamically from the backend.)
I am thinking to somehow do this in draw event, but not sure how to do this.
chart.on('draw', function (data) {
if (data.type === 'grid') {
}
});
The easiest way to do this is via CSS. Something like this will work:
.ct-grid.ct-horizontal:nth-of-type(2),
.ct-grid.ct-horizontal:nth-of-type(9) {
stroke-width: 3;
stroke-dasharray: 10px 5px;
}
Obviously you could add a parent class and then just toggle this on the parent element if you need to turn these thicker gridlines on and off.
NOTE - somewhat surprisingly, chartist.js seems to add the class ct-horizontal to the vertical gridlines, and vice versa...
See this fiddle for reference: http://jsfiddle.net/whf5h1yu/2/
In the example below, I want to permanently highlight a specific link (connection between each of the nodes) on initial load:
http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13
As you can see, it will highlight a link on mouse hover.
This achieved with css:
.link:hover {
stroke-opacity: .5;
}
How can I obtain the same result for a specific link (e.g for link between the first two nodes), without using mouse hover (i.e when the SVG elements are first added).
That's what you need: First, filter the link array accordingly.
var firstLink = link.filter(d => d.source.node === 0 && d.target.node === 4);
In that case, we get the first link (at the top), which goes from node 0 (source) to node 4 (target).
Then, apply the opacity:
firstLink.attr("opacity", .5);
Here is a fiddle showing it: https://jsfiddle.net/7mm1ko4f/
I found this excellent example and sample code for drawing directed graphs - http://bl.ocks.org/cjrd/6863459
However, the graph-creator.css file defines a global style for all nodes. What if I want to assign different styles to certain "special" nodes from all other nodes (I want them to be different shapes and also differently colored and if possible also a different transparency). How would I modify this code to add these node specific effects?
You can choose to append different shapes here based on different scenario:
// append new elements in <g> element in scenario X
// you can pass different parameters for specific styling here
// for example, user select "red" color rect in setting filters
newGs.append("circle")
.attr("r", String(consts.nodeRadius));
// alternatively append rect
newGs.append("rect")
.attr({
"x": // mouse event info as circles in the demo
"y": // mouse event info as circles in the demo
"width": String(consts.rectWidth),
"height": String(consts.rectHeight)
})
.attr("class", "myRectStyle") // set styles in css
.attr("fill", "red")
.attr("rx",5)
.attr("ry",5)
In order to achieve the goal, first you must understand the CSS concepts. First of all you can place a CSS for a HTML/SVG markup in 3 places.
External CSS file,
Same HTML File with a <style> block
Inline CSS inside the tag eg. <circle> <li> <line> etc.
In your case, if you want to give different styles for different nodes, then you can give them specific css class/id selectors and have styles in any of the 3 methods I have mentioned previously.
Let's say you want to make certain circles transparent, then just give the circles a class "trCircles" and specify the CSS in a external CSS file and link the file with <link>
d3.select('g')
.append('circle')
.attr('class', 'trCircle')
...
in the CSS file you can have.
.trCircle{
fill : transparent;
}
Orr if you want to apply them in the d3 level. You can specify it when you create the circle.
d3.select('g')
.append('circle')
.attr('cx' , '100')
.....
.style('fill','transparent')
;
Hope you get the idea.
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));