I'm trying to get the values for an element's translation.
For example, if I select the x axis:
d3.select('.x.axis').attr("transform")
then I get
"translate(0,112)"
How do I get the 0 and the 112 without parsing a regexp?
I'm trying to do it so that I can add to the value. In pseudocode:
d3.selectAll('.x.axis').attr('transform', 'translate('
.attr('transform').match(/(\d+)(\.\d+)?/g)[0] // <-- clearly won't work
+ additional_value
+ ', 0)');
D3 provides the transform() function for exactly this purpose:
var t = d3.transform(d3.select('.x.axis').attr("transform")),
x = t.translate[0],
y = t.translate[1];
if you would like to use selectAll you could try something like this:
// move ticks to the center of the x-axis
var transform;
d3.selectAll('.tick').attr('transform', function(){
transform = d3.transform(d3.select(this).attr("transform"));
return "translate("+transform.translate[0]+", -3)";
});
Related
This is related to the dc.js boxPlot example. Is there an easy way to add the number of data values to each xAxis label?
exp-1 [10]
I know I can configure the xAxis label by:
chart.xAxis().tickFormat(function(k) {return k + ' []';});
But I only have access to the key and not the value count.
I would do this by keeping a map from keys to counts, refreshing it before the chart is rendered or redrawn:
var counts = {};
function get_counts() {
speedArrayGroup.all().forEach(function(kv) {
counts[kv.key] = kv.value.length;
});
}
chart.on('preRender', get_counts)
.on('preRedraw', get_counts);
Now that we're sure counts is initialized whenever the axis is drawn, we can use it in the tickFormat:
chart.xAxis().tickFormat(function(k) {return k + ' [' + counts[k] + ']';});
Not so interesting with the standard example, but it works:
I have an area chart I am using from http://bl.ocks.org/mbostock/3883195 with a simple modification of using json data.
The json is returned without issue, and no other errors present themselves, however, no chart is displayed.
The x and y axes are displayed, but no chart.
jsfiddle.net/oqc19yff/
Any pointers welcome.
Kev
This is incorrect:
x.domain(d3.extent(data, function(d) { return d.event_time; }));
Reason:
Because x is an ordinal scale.
Instead it should have been:
//declare a variable array
var k = [];
data.forEach(function(d) {
d.event_time = d.event_time;
d.total = +d.total;
k.push(d.event_time);//in that array store all the event_time
});
Now set that array as domain of x.
x.domain(k);
working code here
I am new to d3 and using brushing on grouped bar chart
http://fiddle.jshell.net/CjaD3/21/
I am trying to get the range selected. I am listing to the "brushend" event and calling a function brushend(). Its getting called but returning me the x-axis coordinates in numbers ([42, 318]). I want in Date dormat like 'Sat 25' to 'Mon 27'
Thanks for your help.
This is where you would usually use a the invert method of your x-scale. Unfortunately, that method doesn't exist for ordinal scales. Luckily, Jason Davies, patch is still around. I don't like messing with the source, so I adapted it for your function:
function brushend() {
console.log("brushend");
var b = brush.empty() ? contextXScale.domain() : brush.extent();
console.log(b);
var d = mini_x0.domain(),
r = mini_x0.range(),
startDate = d[d3.bisect(r, b[0]) - 1],
finDate = d[d3.bisect(r, b[1]) - 1];
console.log([startDate, finDate]);
}
Updated fiddle.
I am looking for help to override default tooltip functionality for nvd3 bar (discrete) chart.
The default tooltip picks yAxis ticks and show in the tooltip.
However, in my case i don't want to show yAxis data (formatted in currency) in tooltip rather than i would like show actual yAxis value (original value without currency).
This is how i am pushing values to my data[].
#foreach (var item in Model.BarChart)
{
string yvalue = item.Cost== 0 ? "undefined" : item.Cost.ToString();
string xvalue = item.Date.ToString("yyyy/MM/dd");
#:data[0].values.push({y: #yvalue, x: '#xvalue'});
}
I am formatting yAxis tick using the following line of code
chart.yAxis.tickFormat(function(d) { return d3.format(".1s")(d) + " USD" });
Any hint?
Let me know if you need more info?
After googling, i found the following way but in this example 'y' is yAxis value and not the original value. So, how i can replace this 'y' with orginal value?
chart.tooltip(function (key, x, y, e, graph) {
return '<p><strong>' + key + '</strong></p>' +
'<p>' + y + ' in the month ' + x + '</p>';
});
Try e.value instead of y.
chart.tooltipContent(function (key, x, y, e, graph) {
return '<p><strong>' + key + '</strong></p>' +
'<p>' + e.value + ' in the month ' + x + '</p>';
});
e.point should also contain the original data, including any extra attributes. For example, if your input data has an "extra" attribute (like { label : "A" , value : -29.76, extra: 123 }), then you can use e.point.extra.
is there a way to get the start and end values of the quantizes of an quantize scale.
The range is defined by 5 colors ans the domain by d3.min and d3.max function on my data from an json file.
I need them for my legend of an choropleth map.
Thank you for helping.
Carsten
Thats my code
var quantizecolors = ["#d7191c","#fdae61","#ffffbf", "#a6d96a","#1a9641"];
var colorEnerg = d3.scale.quantize().range(quantizecolors);
colorEnerg.domain([
d3.min(collection.features, function(d){return d.properties.EB/d.properties.BEVZ;}),
d3.max(collection.features, function(d){return d.properties.EB/d.properties.BEVZ;})
]);
I assume that you're asking about the minimum and maximum domain values. Apart from saving them when you're setting them, you can also call colorEnerg.domain() without any values, which will return the array [min, max].
You can get the position of the breaks by computing the number and position of intervals:
var dom = colorEnerg.domain(),
l = (dom[1] - dom[0])/colorEnerg.range().length,
breaks = d3.range(0, colorEnerg.range().length).map(function(i) { return i * l; });