jVectorMap change SVG stroke color - javascript

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?

Related

How to change Dimple js gridlines styles

I want to change the style of Yaxis grid lines to dashlines. Could anyone help me on this. Thanks..
I know this is old but this might help someone looking to change the gridline color.
The example dimplejs website gives does not work as you pointed out.
This is because the stroke attribute will be overridden by the line STYLE.
This is from the dimplejs webpage and does change the stroke but does not display the new color.
myAxis.gridlineShapes.selectAll("line").attr("stroke", "#FF0000");
Change the style instead of the stroke attribute like this.
myAxis.gridlineShapes.selectAll("line").style("stroke", "#FF0000");

D3 fill shape when draw with path

I'm using D3 to draw a certain shape layout for my map and the drew area has to be shaded. I am using line path to achieved the shape, What I couldn't figured out is how do I shade (fill) the area with a certain color. See picture for an example shape, just random in this case for visual aid.
you need to checkout the fill style property on paths.
<style>
path {
fill: red;
}
</style>
In order to fill the area described by these paths, simply assign the CSS attribute fill.

How to use declared variables in html section?

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));

Have a background image in paper.path with raphael?

I want to put some background image to my paper.path I've created with raphael
paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({
'stroke': "#ccc",
'stroke-width': rinc - 1
});
The result:
http://jsfiddle.net/n4Rvr/
I just want to put some image instead the #ccc color. Is it possible? However, I didn't find something interesting on internet.
You want to fill the stroke of the path? There's no support for using patterns on the stroke in Raphaël, so it's not as easy as it is in pure svg, where you can either stroke with a pattern or mask an image with the given path to get the effect you're after.
To get something similar in Raphaël you'll need to build the stroked path as a new path, basically tracing around the inner and outer arcs so that you can fill it. Then use 'fill' instead of 'stroke' and pass in the url of the image you want.

Fill property in raphael js

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.

Categories