Develop Reference

How to change bg color of dynamic CSS class from JS

I have a bar chart and I want to be able to assign individual fill colors to bars depending on a condition. I don't think it matters, but I am using angular-nvd3 linePlusBarChart to draw bars.
UPDATE
There seemingly is an issue with my local environment, possibly with NVD3 or angular libraries, I am not sure what's going on yet. I put together jsfiddle and everything worked perfectly. See the link below, the bars can have different colors.
On my local computer though, when the execution reaches the point var y = document.querySelector(...., I am getting angular error in console ->>>>> y is null.
http://jsfiddle.net/p0g9Lqu8/
Here is the HTML.
<nvd3>
<g class="nv-bars">
<rect x="0" y="419" height="1" fill="LimeGreen" class="nv-bar positive nv-bar-0-0" width="267"></rect>
<rect x="0" y="252" height="168" fill="LimeGreen" class="nv-bar positive nv-bar-0-1" width="267"></rect>
<rect x="0" y="294" height="126" fill="LimeGreen" class="nv-bar positive nv-bar-0-2 hover" width="267"></rect>
<rect x="0" y="252" height="168" fill="LimeGreen" class="nv-bar positive nv-bar-0-3" width="267"></rect>
</g>
</nvd3>
As you can see, each rect tag has a dynamic CSS class nv-bar-0-1, nv-bar-0-2.. that I would like to be able to point to from JS. NOTE: from HTML, if I use CSS, all works, but from JS loop, does not. Any help is appreciated.
This perfectly works.
<style>
nvd3 .nv-bars rect {
fill:white;
}
nvd3 .nv-bars rect.nv-bar-0-1{
fill:yellow;
}
</style>
But this, does not:
for(var i = 0; i < 4; i++) {
var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i);
y.style.fill = "#ffff00";
}
OR this one, same result
var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1); // y is always null
y.style.fill = "#ffff00"; // triggers null reference error here
I call that JS fragment inside Angular controller in this block:
angular.element(document).ready(function () {
var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
console.log('>>>>>>>>>>>===' + y); // this outputs [object HTMLUnknownElement]
y.style.fill = "#ffff00";
});

I thank everybody for time and input. I finally found where the problem was and what the solution would be, so I would like to share it with the community in case anybody comes across a similar problem.
My final output into the browser is a result of combining multiple HTML/JS/CSS fragments. The issue was in timing: the JS code was attempting to refer to a tag, but it appeared the dynamic construction of that tag with its HTML/CSS was not complete at the time of JS reference.
angular.element(document).ready(.... could not do the job, but a pure JS approach from the link below - did.
https://github.com/jfriend00/docReady
I enclosed the JS block that was to check some conditions and assign colors to bars, into the docReady block. See the simplified code sample below.
docReady(function () {
for (var i = 0; i < 4; i++) {
var k = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i);
// some condition goes here.....
k.style.fill = "green";
}
var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
// this too changes color
y.style.fill = "#ff0000";
});
Worked in all major browsers: Firefox, Chrome, Safari and IE

SVG element inserted into DOM is ignored (its type is changed)

I am using the VivaGraph.js library to render a graph in SVG. I am trying to display an image cropped to a circle, for which I am using a clipPath element - as recommended in this post.
However, when I create a new SVG element of type that has a capital letter in it, e.g. clipPath in my case, the element that is inserted into the DOM is lowercase, i.e. clippath, even though the string I pass in to the constructor is camelCase. Since SVG is case sensitive, this element is ignored. Everything else seems to be okay.
I also tried to change the order in which I append the child elements, in hopes of changing the 'z-index', but it didn't have an impact on this.
I am using the following code inside of the function that creates the visual representation of the node in the graph (the 'addNode' callback) to create the node:
var clipPhotoId = 'clipPhoto';
var clipPath = Viva.Graph.svg('clipPath').attr('id', clipPhotoId);
var ui = Viva.Graph.svg('g');
var photo = Viva.Graph.svg('image').attr('width', 20).attr('height', 20).link(url).attr('clip-path', 'url(#' + clipPhotoId + ')');
var photoShape = Viva.Graph.svg('circle').attr('r', 10).attr('cx', 10).attr('cy', 10);
clipPath.append(photoShape);
ui.append(clipPath);
ui.append(photo);
return ui;
Thank you!

There is a bit of tweaking needed on top of the post you provided.
General idea to solve your issue is this one:
We create a VivaGraph svg graphics (which will create an svg element in the dom)
Into this svg graphic we create only once a clip path with relative coordinates
When we create a node we refer to the clip path
Code is:
var graph = Viva.Graph.graph();
graph.addNode('a', { img : 'a.jpg' });
graph.addNode('b', { img : 'b.jpg' });
graph.addLink('a', 'b');
var graphics = Viva.Graph.View.svgGraphics();
// Create the clipPath node
var clipPath = Viva.Graph.svg('clipPath').attr('id', 'clipCircle').attr('clipPathUnits', 'objectBoundingBox');
var circle = Viva.Graph.svg('circle').attr('r', .5).attr('cx', .5).attr('cy', .5);
clipPath.appendChild(circle);
// Add the clipPath to the svg root
graphics.getSvgRoot().appendChild(clipPath);
graphics.node(function(node) {
return Viva.Graph.svg('image')
.attr('width', 30)
.attr('height', 30)
// I refer to the same clip path for each node
.attr('clip-path', 'url(#clipCircle)')
.link(node.data.img);
})
.placeNode(function(nodeUI, pos){
nodeUI.attr('x', pos.x - 15).attr('y', pos.y - 15);
});
var renderer = Viva.Graph.View.renderer(graph, { graphics : graphics });
renderer.run();
The result in the dom will be like this:
<svg>
<g buffered-rendering="dynamic" transform="matrix(1, 0, 0,1,720,230.5)">
<line stroke="#999" x1="-77.49251279562495" y1="-44.795726056131116" x2="6.447213894549255" y2="-56.29464520347651"></line>
<image width="30" height="30" clip-path="url(#clipCircle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="a.jpg" x="-92.49251279562495" y="-59.795726056131116"></image>
<image width="30" height="30" clip-path="url(#clipCircle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="b.jpg" x="-8.552786105450746" y="-71.2946452034765"></image>
</g>
<clipPath id="clipCircle" clipPathUnits="objectBoundingBox">
<circle r="0.5" cx="0.5" cy="0.5"></circle>
</clipPath>
</svg>
Notice the clipPathUnits="objectBoundingBox", since it's the main trick for this solution.

How to use the SVG checkintersection() function correctly?

I'm having a problem with the SVG checkintersection() function. All I want to do is to check whether a small SVG-rectangle intersects the area of an SVG-path, but I can't figure out what to call the function on (I already tried to call it on the SVG DOM object, among several other things google turned up).
So what I need to know is what to put in for the placeholder ("foo") in this snippet:
var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);
if (foo.checkIntersection(closedPath, rectangle)) {
//do stuff
};
with the HTML being something along the lines of
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgroot">
<g>
<path id="closedPath" fill="{$c5}" d="M-250179-46928l-5051 1351l-867-1760l-33-146l-12-99l-82-678l-17-249l86-644l305-1800l158-2882l75-1425l-47-280l-22-131l-137-411l-300-892l1273 620l931-109l1957-734l1860-1096l292-192l884 547l2690 2153l480 963l36 244l-948 1878l-376 591l-60 567l-72 1147l97 847l-222 334l-122 117l-2403 2093l-353 76z"/>
<rect id="rectangle" fill="white" x="-126828" y="0" width="45000" height="45000"/>
</g>
</svg>
</body>
</html>
Any help would be much appreciated!
Edit: Just wanted to add that I now use a workaround, which consists of converting the SVG path to an array of point coordinates using a parser function I wrote, which is then put into a simple coordinate-test function.
Also this may have been a solution Hit-testing SVG shapes?

checkIntersection is a method on the <svg> element so you'd want something like this...
var svg = document.getElementById("svgroot");
var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);
var rect = svg.createSVGRect();
rect.x = rectangle.animVal.x;
rect.y = rectangle.animVal.y;
rect.height = rectangle.animVal.height;
rect.width = rectangle.animVal.width;
svg.checkIntersection(closedPath, rect) {
// do stuff
}
Note also how the second argument has to be an SVGRect and not an element.
SVG elements support SMIL animation, you could equally well write rectangle.baseVal.x etc but that wouldn't necessarily reflect the rectangle's current position if you were animating the rectangle. If you're not using SMIL then rectangle.baseVal.x = rectangle.animVal.x
Because a <rect> can have things like rounded corners it doesn't have an SVGRect interface so you have to convert from the interface it does have (SVGRectElement) to the one you need (SVGRect)

<svg width="390" height="248" viewBox="-266600, -68800, 195000, 124000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="closedPath" fill="#ff9966" d="M-250179-46928l-5051 1351l-867-1760l-33-146l-12-99l-82-678l-17-249l86-644l305-1800l158-2882l75-1425l-47-280l-22-131l-137-411l-300-892l1273 620l931-109l1957-734l1860-1096l292-192l884 547l2690 2153l480 963l36 244l-948 1878l-376 591l-60 567l-72 1147l97 847l-222 334l-122 117l-2403 2093l-353 76z"/>
<rect id="rectangle" fill="#66ff66" x="-126828" y="0" width="45000" height="45000"/>
</svg>
<script>
var rectangle = document.getElementById('rectangle');
var closedPath = document.getElementById('closedPath');
var svgRoot = closedPath.farthestViewportElement;
var rect = svgRoot.createSVGRect();
rect.x = rectangle.x.animVal.value;
rect.y = rectangle.y.animVal.value;
rect.height = rectangle.height.animVal.value;
rect.width = rectangle.width.animVal.value;
var hasIntersection = svgRoot.checkIntersection(closedPath, rect);
console.log(hasIntersection);
</script>

Javascript-Generated SVG Not Updating

I have a script that adds elements to an inline SVG image via jQuery, but the new elements don't seem to be showing up. The output is perfectly valid; I can copy it into the original file, reload it, and it will render just fine. But when the script generates it, the new elements aren't visible.
Here is a snippet that replicates the problem: http://tinkerbin.com/7OmDWlsz
Thanks in advance!

You will not see any svg output if the elements are not in the svg namespace.
Try replacing your script snippet with this:
var slices = 10;
for(i = 0; i < 360; i += 360 / slices) {
var element = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
element.setAttribute("points", "0,0 -10,100 10,100");
element.setAttribute("transform", "rotate(" + i + ")");
$('#rotate').append(element);
}

Thank you to much #Erik Dahlström, I may add a contribution to this. Here is the function I define in order to build svg trees :
Node.prototype.svg_grow = function(node_name, node_attr) {
n = document.createElementNS("http://www.w3.org/2000/svg", node_name);
this.appendChild(n);
if (typeof node_attr !== 'undefined') {
for (key in node_attr) {
n.setAttribute(key, node_attr[key]);
}
}
return n;
}
So you can just use svg_grow() on any node like this :
s_g = document.getElementById("parent");
s_rect = s_g.svg_grow('rect', {x:0, y:0, width:480, height:640});
which just do :
<g id="parent">
<rect x="0" y="0" width="480" height="640" />
</g>

Get pixel length of String in Svg

I'm currently working with SVG. I need to know the string length in pixels in order to do some alignment. How can I do to get the length of a string in pixel ?
Update: Thanks to nrabinowitz. Based on his help, I can now get the length of dynamic-added text. Here is an example:
<svg id="main"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1020"
height="620"
viewBox="0 0 1020 620"
onload="startup(evt)">
<script>
<![CDATA[
var startup = function (evt) {
var width;
var svgNS = "http://www.w3.org/2000/svg";
var txtNode = document.createTextNode("Hello");
text = document.createElementNS(svgNS,"text");
text.setAttributeNS(null,"x",100);
text.setAttributeNS(null,"y",100);
text.setAttributeNS(null,"fill","black");
text.appendChild(txtNode);
width = text.getComputedTextLength();
alert(" Width before appendChild: "+ width);
document.getElementById("main").appendChild(text);
width = text.getComputedTextLength();
alert(" Width after appendChild: "+ width)
document.getElementById("main").removeChild(text);
}
//]]>
</script>
</svg>

I've been wondering this too, and I was pleasantly surprised to find that, according to the SVG spec, there is a specific function to return this info: getComputedTextLength()
// access the text element you want to measure
var el = document.getElementsByTagName('text')[3];
el.getComputedTextLength(); // returns a pixel integer
Working fiddle (only tested in Chrome): http://jsfiddle.net/jyams/

Having read various similar threads with interest and benefitted from some of the ideas, I've created a page which compares three of the Javascript methods side-by-side. I've noted results in
IE9
Firefox 29.0.1 and
Chrome 34.0.1847.131 m
You can load it in your browser and see what works for you:
http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44.