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));
Related
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.
I have a shape (a drawn cloud) in a g within a defs tag. Unfortunately, I am not able to use this shape inside a circle using d3.js. Here is my code:
JSFiddle
What I am trying to do is to display that shape which is in defs tag inside the circle shown in the SVG. I have tried many times in different ways but I could not use the shape from the defs tag inside the circle. Could anyone please assist me with this issue? Thank you in advance.
A circle can't contain other shapes. According to the MDN docs it may only contain descriptive elements and animation elements. These categories don't include shapes like circle, or use.
Rather than nesting your shapes, you should create a parent g and append the circle and use to that:
// Create a `g`, rather than a `circle`, for each data point
var groups = svg.selectAll(".group").data(data).enter().append("g")
.attr("class", "group");
// Append a `circle` to the new g
groups.append("circle")
.attr("cx",100).attr("cy",100).attr("r",20);
// Append a `use` to the new g
groups.append("use").attr("xlink:href", "#mySymbol");
JSFiddle
I've been searching the web for tutorials or methods on how to to implement my own point to point navigation system for an SVG-based indoor floor plan map. I have searched the web but the only options work with google maps. However I created my map using Illustrator as an SVG image using paths/vectors. I don't need to implement any navigational instructions for the user, just a simple route from one point to another. There must be a way to use the vectors to plot points on the map that the navigational path can take for turns etc.
Any advice appreciated
Thanks
Yes! You can do this with JavaScript, as well as add event listeners and do other DOM manipulation similar to with a normal HTML page. (See the bottom of this answer for how to draw a line on the SVG given two points.)
I am working on a project that does exactly this. The user is able to enter their starting room number and destination room number, and the route is plotted on the SVG.
It was a bit tedious, but what we did was put circle elements on the SVG. There were elements outside of each doorway, and also at hallway intersections.
A typical element is as follows.
<circle
id="route3287-1"
style="fill:#000000;stroke:none"
cx="2014.0000"
cy="239.6"
r=".05"
data-neighbors="route3296-1,06-07" />
Note that the radius attribute is small enough to where it won't be seen on the SVG (unless the user decides to zoom in alot). We also manually entered into the data-neighbors attribute the ids of adjacent points. This is because our back end parses the SVG file, builds a graph using these points, and uses Dijkstra's algorithm to generate the route. We used the cx and cy attributes to calculate the distance between nodes on the graph.
Here is a close up of what the points look like (when the radius is big enough to see them)
Now, when a route is generated we are simply drawing lines on the SVG between each of the points. We put each of the lines in a group so that we can reference it by id later and remove the entire route when we decide to draw a new one.
Here is an example. Where "svg" is a reference to the SVG element, here is how we draw a line between two points (x1,y1,x2,y2), you could easily iterate through a list of points and draw all the lines in a similar fashion.
var newElement = svg.createElementNS('http://www.w3.org/2000/svg', 'path');
newElement.setAttribute('d', 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2);
newElement.style.stroke = '#000000';
newElement.style.strokeWidth = '15px';
svg.appendChild(newElement);
You can manipulate the SVG with JS and CSS and this way add more interactions with the SVG. SVG is XML an can be traversed with JS as normal DOM tree, so you can create functions to handle your requirements. You can even place the SVG you've created as Layer in Google Maps.
The article uses simple example for FloorMaps. Interface with SVG
You can draw a SVG and with javascript add be interative
https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines
If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle
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?