nvd3-angular-directives pie chart is rounding of values when showing percentages. Is there a way to display the exact with decimal places? I have values 99.71% & 0.29% which are rounded to 100% and 0%.
...
<nvd3-pie-chart
data="scenarioPie"
id="scenarioPie"
width="450"
height="450"
x="xFunction()"
y="yFunction()"
donut="true"
tooltips="true"
showLabels="true"
donutLabelsOutside="true"
labelType="percent"
showLegend="true"
donutRatio=".4">
<svg></svg>
...
I tried using a function as below to return a format but its not working
...
labelType="myFunction()"
...
$scope.myFunction=function() {
return function(d){
return d3.format(',.2%');
}
}
$scope.xFunction = function(){ return function(d){ return d3.format('.02f')(d.x); }; };
Related
Scratching my head on this one.
We have a list of text on the left side of the page. Each item in the list has a data-id attribute that makes it easy to match up corresponding schools in our SVG map. This SVG map is a map of the US, and has school locations fed in from a CSV excel sheet and stored in "schools" for access.
circles.selectAll("circles")
.data(schools)
.enter().append("svg:a")
.attr("xlink:href", function(d) { return d.url; })
.append("svg:circle")
.attr("school", function(d, i) { return d.name; })
.attr("id", function(d, i) { return d.id; })
.attr("cx", function(d,i) { return d.longitude; })
.attr("cy", function(d,i) { return d.latitude; })
.attr("r", function(d,i) { return 6; })
.attr("i", function(d,i) { return i; })
.attr("class", "icon")
So when a user hovers over this list of text I previously mentioned, I use this function:
mapSearch = function(id) {
d3.selectAll("circle")
.filter(function(d) {
if (d.id == id) {
return show_bubble_2(d);
}
})
}
Which calls:
show_bubble_2 = function(school_data) {
var school_info = school_data,
latitude = school_info.latitude,
longitude = school_info.longitude;
bubble.css({
"left": (longitude - 75)+"px",
"top": (latitude - 67)+"px"
});
bubble.html("<h1>" + school_info.name + "</h1>" + "<p>" + school_info.city + ", " + school_info.state + "</p>")
.attr("class", function(d) { return school_info.letter; });
bubble.addClass("active");
}
This works unless we start resizing the map to fit different screen sizes, or unless we do special zoom functions on the map. Then the bubbles closer to the west coast are where they're supposed to be but the ones on the east coast are way off. In short, it's a complete nightmare and not at all scalable.
My question: How do I just append this DIV to the corresponding circle ID instead of using an absolute positioned DIV so that no matter what size the map is, the bubble will always pop up right on top of that circle.
I have tried appending inside the if (d.id == id) { } but it always returns errors and so far I haven't figured it out. I'll keep trying something along those lines because I feel like that's the way to do it. If you have a better solution or could point me in the right direction, I would really appreciate it.
Thanks, and have a good one!
You can find the position of the circle even if there is a transform applied by using Element.getBoundingClientRect.
You could use your filtered selection, get the .node() and find its bounding rect. Then by adjusting for the scroll position, you can find the values of top and left to give to your bubble.
This means that the position of the bubble is based on the actual position at which the circle appears on the page, rather than being based on its data, which would require you to take the transforms into account. Try something like this:
mapSearch = function(id) {
// get the selection for the single element that matches id
var c = d3.selectAll("circle")
.filter(function(d) {
if (d.id == id) {
return show_bubble_2(d);
}
});
// get the bounding rect for that selection's node (the actual circle element)
var bcr = c.node().getBoundingClientRect();
// calculate the top/left based on bcr and scroll position
var bubbleTop = bcr.top + document.body.scrollTop + 'px',
bubbleLeft = bcr.left + document.body.scrollLeft + 'px';
// set the top and left positions
bubble.css({
'top': bubbleTop,
'left': bubbleLeft
});
}
Of course, if you are zooming or panning and want the bubble to remain on the circle, you will need to recalculate these values inside your zoom and pan functions, but the process would be the same.
HERE is a demo using circles that are randomly placed within a g element that has a translation and scale applied. Click on an item in the list to place the bubble on the corresponding circle.
A <div> is HTML. A <circle> is SVG. You can't (easily) put HTML elements inside SVG. You'd have to use <foreignobject> elements to do that. (See this question for details.) Alternatively, you could use native SVG elements such as <tspan> instead of <div>
I am follow this example to make a map with leaflet and d3, using the latest versions of d3 and leaflet. Something in my code is causing d3 to return different values for the SVG elements in Chrome and FF 28. This is causing the points to be skewed in FF, which has different d values in the PATH elements as well as different transform properties in the SVG elements.
Here is the SVG for Chrome:
<svg width="1049711" height="1802" transform="translate(127,1079)" style="margin-left: -127px; margin-top: -1079px;">
<g class="leaflet-zoom-hide" transform="translate(127,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M287,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1092,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>
Here is the SVG for Firefox
<svg width="1049711" height="1802" style="margin-left: -97px; margin-top: -1079px;" transform="translate(97,1079)">
<g class="leaflet-zoom-hide" transform="translate(97,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M317,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1122,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/><path class="nora f" id="4170_OLD_GENTILLY_RD" lat="30.0024662600001" long="90.0401487569999" d="M457,-3m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>
Here is the code that loads the map and projects the points. At the very end there is a function project that returns a different x-value for the point in Chrome and FF 28. I think that this line is creating the overall problem with the code. The x-value is off by different values at different times, so it is hard to write a correction.
var map = new L.Map("map", {center: [29.95, -90.05], zoom: 13, minZoom:10, maxZoom:18})
.addLayer(new L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'));
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
//these brackets are jinja2 template syntax. They eventually return 'static/out.json'
d3.json('out.json') }}', function(collection) {
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project).pointRadius(function (d) {return 2});
console.warn(path)
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path").attr("class", function(d){
return d.properties.category + " " + d.properties.investigates;;
}).attr("id", function(d){
return d.geometry.address;
}).attr("lat", function(d){
return Math.abs(d.geometry.coordinates[1]);
}).attr("long", function(d){
return Math.abs(d.geometry.coordinates[0]);
});
$(".t").on("click", function(e) {
var adr = "/" + this.id;
showDialog(adr);
});
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
console.warn(bounds)
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px").attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path)
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
I proposed this as a bug to leaflet. If you try the fiddle in FF 28 and Chrome you will see that line 51 returns different x-values for the same lat/long in Chrome (right x value) and firefox (wrong x value)
I have tried this fiddle in FF 27 and FF 28 -- each of these versions of firefox returns a different (and incorrect) x-value for the point on line 51.
Have I hit a bug in leaflet or d3 or is there an issue with my code? Is there a workaround? What's going on here?
I ended up getting this to work by following this example: https://gist.github.com/ZJONSSON/2957559
Here is the working code:
var path = d3.geo.path().projection(function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}).pointRadius(function(d) {
return 2;
});
/* Load and project/redraw on zoom */
d3.json("static/out.json", function(collection) {
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("class", function(d) {
return d.properties.category + " " + d.properties.investigates + " " + d.properties.thumbnail;
}).attr("id", function(d) {
return d.properties.address;
}).attr("lat", function(d) {
return Math.abs(d.geometry.coordinates[1]);
}).attr("long", function(d) {
return Math.abs(d.geometry.coordinates[0]);
})
.attr("d", path);
map.on("viewreset", function reset() {
feature.attr("d", path);
});
loadThumbs();
});
The problem is how you're calling d3.json.
d3.json('{{url_for('static', filename='out.json') }}', //...
isn't valid. The d3.json function expects its first parameter to be a URL string, not an object. In both FF and webkit you're probably getting random garbage and that's what your code uses to calculate the bounds.
Are you trying to use a template (i.e. mustache) to construct the URL? If so, you're forgetting to render the template.
I was wandering if there is a way to adjust width of the math mathjax renders. Some math expression I have are longer and won't fit in a box I have created. Is there a way to squeeze it and make it fit maybe by changing the size or width? I have tried using line breaks but that isn't what I want. An example would be a mathjax like this:
2x+3+4 - /intcos(x) dx
234567897+sin(2x)+34567890987654.
Displaying the last line would be a problem because it won't fit in the box. It overflows
Well, you could use \small or \scriptsize or \Tiny (non-standard) or \tiny within the mathematics to make it appear in a smaller size.
Alternatively, you could put a <span style="font-size:70%">...</span> around the mathematics to get the math to be scaled to whatever size you need. E.g.,
<span style="font-size:70%">\(234567897+sin(2x)+34567890987654\)</span>
Note that the math delimiters must be inside the <span>.
I found a solution that doesn't require adding elements or css code:
// resize all LaTeX Display elements to they fit in on screen
function cvonk_ResizeMathJax() {
jQuery('.MathJax_Display').each(function(ii, obj) {
var latex = obj.children[0];
var w = latex.offsetWidth;
var h = latex.offsetHeight;
var W = obj.offsetWidth;
if (w > W) {
obj.style.fontSize = 95 * W / w + "%";
}
});
}
window.MathJax = {
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("Begin", function() {
MathJax.Hub.Queue(function() {
cvonk_ResizeMathJax();
});
});
},
jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
extensions: ["tex2jax.js"]
};
window.addEventListener("resize", function() {
cvonk_ResizeMathJax();
});
From the Google Groups discussion linked to above:
function changeSize(button) {
var myeqn = document.getElementById('myeqn');
myeqn.style.fontSize = button.textContent;
MathJax.Hub.Queue(
['Rerender', MathJax.Hub, 'myeqn'],
function () {
document.getElementById('mylabel').innerHTML =
'width: ' + myeqn.offsetWidth + ", height: " + myeqn.offsetHeight;
});
}
See http://jsfiddle.net/nLyraL1f/ or http://jsfiddle.net/s2bjepk6/.
This is also nice because it gets the width and height of the rendered latex, useful for things like rendering it as an element positioned over a canvas since you can draw things on the canvas around it.
When we create a primefaces chart then it shows number scale in decimal points. I want to show without decimal places like simple munbers.Is there a way?Thanks
Update:
While the workaround posted below still works I found a more proper solution to do this. Number scale can be formatted trough extender function:
<p:barChart value="#{testClazz.categoryModel}" legendPosition="ne"
widgetVar="barChartObj1" extender="ext1"/>
place the following function between the <head></head> tags on your page:
<script type="text/javascript">
function ext1() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%d'
};
}
</script>
After experimenting a bit with jqPlot I found out that if you reset the axes after the plotting has finished the decimals after the decimal point are cleared. If your barChart is definied like this:
<p:barChart id="basicPlot" value="#{testClazz.categoryModel}"
legendPosition="ne" widgetVar="barChartObj"
title="Basic Bar Chart" min="0" max="270"/>
call the following function after the page load is finished:
<script type="text/javascript">
$(document).ready( function() {
setTimeout(formatAxisNumbers, 500);
});
function formatAxisNumbers() {
window.barChartObj.plot.resetAxesScale();
window.barChartObj.plot.replot();
}
</script>
Note that instead of resetting both axes with resetAxesScale you can reset x or y separately by doing:
window.barChartObj.plot.axes.xaxis.resetScale();
or
window.barChartObj.plot.axes.yaxis.resetScale();
You can also expriment with decreasing the timeout to smaller numbers to achieve smoother replot.
For other options see the jqPlot documentation.
Tested in Google Chrome 22.0.1229.94 (Official Build 161065).
I am trying to use d3 to make a block which contains an arbitrary number of rects and text elements. The way I envisioned it was to nest everything within an svg and have the svg be dragable while everything moves along with it.
However, whenever I attach a drag behavior to the element it blurs whenever I move it. This behavior occurs even when I nest a g within the svg and everything else withing the g element.
Here is the simplified code. I have a main svg in which I insert another svg in which I nest a rect.
var dragT = d3.select('#test').append('svg').selectAll('svg.test')
.data([{x:100,y:100}])
.enter().append('svg')
.attr('x',100).attr('y',100)
.style('width',100)
.call(rectDragBehav).append('g')
.append('rect').attr('x',100).attr('y',100)
.attr('width',100).attr('height',100);
var rectDragBehav = d3.behavior.drag()
.on('drag', rectDragDrag)
function rectDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy; console.log(1);
d3.select(this)
.attr('x',d.x)
.attr('y',d.y);//.attr("transform", "translate(" + d.x + "," + d.y + ")");
}
Update: I don't know what this entails, but I just discovered that when you scroll down so that the entire svg is out of sight and scroll back up, the afterimages disappear.
Fill your SVG with a big white background <rect /> behind the content, e.g.
<svg …>
<rect fill="white" x="-100" y="-100" width="2000" height="2000" />
…
</svg>
You're just seeing redraw errors from the browser not properly dirtying the changed region. I was seeing the same thing today with Chrome on Windows on this test, but the problems do not appear on any browser under OS X.
Here is an example using jsFiddle. I have made the sample to help you, and I hope it will be beneficial for you.
The HTML:
<svg height="400" width="600"></svg>
The JavaScript:
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragend", dropHandler);
return drag;
}
var g = d3.select("body").select("svg").append("g").data([{ x: 50, y: 50 }]);
g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
g.append("text")
.text("Any Text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
function dropHandler(d) {
// alert('dropped');
}
function dragmove(d) {
d3.select(this)
.attr("x", d.x = d3.event.x)
.attr("y", d.y = d3.event.y);
}