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/
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/
I am working with a chart where there are two types of series:line and column.
As a requirement the types must use the same colour. The problem with that is inability to distinguish between both (see first image)
I have created some code to add borders but that is only valid for the "dots" of the line:
var avgSeries = this.getAvgSeries();
_.forEach(avgSeries, (serie: any) => {
_.forEach(serie.data, (dataPoint: any) => {
if (dataPoint.graphic != undefined) { dataPoint.graphic.attr({ 'stroke': 'black', 'stroke-width': 1 }); }
});
});
1) In the image bellow you can see that line is not visible. I can know that line continue because I have added this black colour to the dots.
2) In the second image the line is visible because I put the mouse over the line.
Now, my question is how can I make the lines more visible as the second image?
When you hover over a column in highcharts it brightens the color by 0.1 by default http://api.highcharts.com/highcharts#plotOptions.column.states.hover
If you look at your images, you'll notice the color of the column in the top is not the same as the bottom.
If you want to be able to distinguish between the column and the line, darken or lighten one slightly.
I basically have a rectangle with a PointText item overlayed on top of it. I currently have a working sample where I can move items around on the canvas by using sample code from the paperjs-v0.9.23\examples\Paperjs.org\HitTesting.html which has been really useful. However, I want to treat the rectangle and the text as one logical grouping to be moved around.
Please see the link below to see what I mean:
http://jsfiddle.net/svt9wa9f/6/
In the HitTesting.html example it has this within the onMouseDown event: `
if (hitResult)
{
path = hitResult.item;
if (hitResult.type == 'segment')
{
segment = hitResult.segment;
} else if (hitResult.type == 'stroke')
{
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
`
I was hoping I could modify this to work with the groups, but it seems this type of hitesting doesn't work. Everytime I click within any object I just get the 'fill' type. So I was then thinking I would have to do a linear search through the array of groups performing a hittest just to see which item is within the group. Or a hashmap keyd on items, and the value as the group. But there must be an easier way?
Within the fiddle example, the group code is commented out because. When you first execute it you can't see the items, you have to hover the mouse pointer of the canvas to get them to appear. Any help on this would be appreciated.
Ideally, I just need to be able to move these groups around through drag events, and extend the code to be able to determine whilst dragging if I am over another grouping. But that is further down the line.
Thank you for your time.
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;
}