In your particular case you can simply use d to position the tooltip, i.e. tooltip.html(d) .style(“left”, d + “px”) .style(“top”, d + “px”); To make this a bit more general, you can select the element that is being moused over and get its coordinates to position the tooltip, i.e. tooltip.html(d) .style(“left”, d3.select(this).attr(“cx”) + “px”) .style(“top”, … Read more
I’ve merged the two charts together – but the watercode is translated correctly if its a separate svg – be good to get this code cleaned up/reviewed. Also ensuring the pointers/labels adjust/adapt with more/less data sets. latest jsfiddle http://jsfiddle.net/NYEaX/1843/ var $this = $(“#checmicalbars”); var data = [{ “label”: “Rendering”, “value”: 90, “startcolor”: “#c3da54”, “endcolor”: “#c1e500” … Read more
I made the one as you requested. source code on github here’s working demo: https://stackoverflow-angular-3d-chart.surge.sh/ This involved several intricate steps. I couldn’t go any deeper from this answer because every part that I mentioned here could be hours worth tutorial. These are what I’ve felt interesting when I was working on it. Used Stacks EDIT: … Read more
Here is what I did differently with your code. // Maintian an instance of the chart var chart; // Maintain an Instance of the SVG selection with its data var chartData; nv.addGraph(function() { chart = nv.models.lineChart().margin({ top : 5, right : 10, bottom : 38, left : 10 }).color([“lightgrey”, “rgba(242,94,34,0.58)”]) .useInteractiveGuideline(false) .transitionDuration(350) .showLegend(true).showYAxis(false) .showXAxis(true).forceY([0.4, 1.6]); … Read more
You can use a recursive function to go through the whole tree: getDepth = function (obj) { var depth = 0; if (obj.children) { obj.children.forEach(function (d) { var tmpDepth = getDepth(d) if (tmpDepth > depth) { depth = tmpDepth } }) } return 1 + depth } The function works as follow: If the object … Read more
‘border-radius’ doesn’t apply to svg:image elements (yet anyway). A workaround would be to create a rect with rounded corners, and use a clip-path. An example. The relevant part of the source: <defs> <rect id=”rect” x=”25%” y=”25%” width=”50%” height=”50%” rx=”15″/> <clipPath id=”clip”> <use xlink:href=”#rect”/> </clipPath> </defs> <use xlink:href=”#rect” stroke-width=”2″ stroke=”black”/> <image xlink:href=”boston.jpg” width=”100%” height=”100%” clip-path=”url(#clip)”/> It’s … Read more
SVG provides a native function called .getPointAtLength() which returns a the x and y values of a path at any length you pass at it. You would need to iterate through the length of the line until you find the corresponding y position. Here is how you would do it in D3: var svg = … Read more
I’m also new to d3 and was struggling with the key function. I didn’t find Tristan Reid’s answer illuminating, because it doesn’t really talk much about the key function. Let’s work through an example, first without a key function, and then with. Here’s our initial html before applying javascript. We’ve got two divs, and there … Read more
When you join data to a selection via selection.data, the number of elements in your data array should match the number of elements in the selection. Your data array has two elements (for Jim and Ray), but the selection you are binding it to only has one SVG element. Are you trying to create multiple … Read more
a wrapper function for overflowing text: function wrap() { var self = d3.select(this), textLength = self.node().getComputedTextLength(), text = self.text(); while (textLength > (width – 2 * padding) && text.length > 0) { text = text.slice(0, -1); self.text(text + ‘…’); textLength = self.node().getComputedTextLength(); } } usage: text.append(‘tspan’).text(function(d) { return d.name; }).each(wrap);