I am new to programming and new to D3, I am learning it using the book "Getting started with D3" and all the examples I can find around the internet.
To start practicing I am trying to create a column chart but am encountering two problems with my x-label:
The labels displayed below my x-axis are not in line with the columns. To be precise, I have numbers displayed before the labels start being displayed.
I am wondering how to rotate the labels. When I try the rotate attribute all of the x-axis is being rotated and I would only like to rotate the labels. I have found some questions related to this but haven't completely understood the answers.
My data are formatted this way:
{"Low_Income_Household_Internet_access":
[{"Country":"Chile","Value":9.69},
{"Country":"New Zealand","Value":47.8},
{"Country":"Greece","Value":25.39},
{"Country":"Italy","Value":33.26},
{"Country":"Israel","Value":40.31},
{"Country":"Portugal","Value":22.72},
{"Country":"United Kingdom","Value":56},...
],
"High_Income_Household_Internet_access":
[{"Country":"Chile","Value":59.78701735},
{"Country":"New Zealand","Value":78.3},
{"Country":"Greece","Value":81.14},
{"Country":"Italy","Value":84.44},
{"Country":"Israel","Value":86.59},
{"Country":"Portugal","Value":89.73},
{"Country":"United Kingdom","Value":90},...
]}
and my code is the following:
function draw(data) {
"use strict";
var w = 600;
var h = 300;
var barPadding = 3;
var margin=20;
var format = d3.format(",.0f");
var x = d3.scale.ordinal().rangeBands([0, w-margin], .1),
y = d3.scale.linear().range([h-margin, margin]);
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(0),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-w);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + margin + ",0)");
// Set the scale domain.
x.domain(d3.range(data.Low_Income_Household_Internet_access.length));
y.domain([0, d3.max(data.Low_Income_Household_Internet_access,function(d) { return d.Value; }) ]);
var bar = svg.selectAll("g.bar")
.data(data.Low_Income_Household_Internet_access)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.Country)+ "," + y(d.Value) + " ) "; });
bar.append("rect")
.attr("width", x.rangeBand())
.attr("height", function(d) { return h-margin- y(d.Value); })
.on("mouseover",function(d) {
d3.select(this)
.style("fill","red")
})
.on("mouseout",function(d) {
d3.select(this)
.style("fill","grey")
})
.append("svg:title")
.text(function(d) { return "" + d.Country + ": " + d.Value + " %"; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, 295)")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);}
Related
I'm trying to generate multiple panels of multiple lines plots in D3 with a 2 levels nested data structure.
Can someone please point me on how to properly generate line plots. I've intuitively tried to use a 2 levels nested data structure, but I can`t find how to properly distribute the lines in their corresponding panels.
See here for the results I have so far:
http://jtremblay.github.io/viz/example.html
Here is my code.
var s = `condition,taxon,abundance,date
condition01,speciesA,0.31,2017-04-13
condition01,speciesA,0.54,2017-04-20
condition01,speciesB,0.21,2017-04-13
condition01,speciesB,0.60,2017-04-20
condition02,speciesA,0.31,2017-04-13
condition02,speciesA,0.48,2017-04-20
condition02,speciesB,0.19,2017-04-13
condition02,speciesB,0.61,2017-04-20
condition03,speciesA,0.13,2017-04-13
condition03,speciesA,0.11,2017-04-20
condition03,speciesB,0.04,2017-04-13
condition03,speciesB,0.11,2017-04-20
`;
var data = d3.csvParse(s);
data.forEach(function(d) { // Make every date in the csv data a javascript date object format
var aDate = new Date(d.date);
d.date = aDate;
});
var taxa = data.map(function (d){
return d.taxon
});
taxa = taxa.filter(onlyUniqueArray);
var dates = data.map(function (d){
return d.dates
});
var dataNested = d3.nest() // nest function allows to group the calculation per level of a factor
.key(function(d) { return d.condition;})
.key(function(d) { return d.taxon;})
.entries(data);
console.log(dataNested);
var fillColors = ["#0000CD", "#00FF00", "#FF0000", "#808080"]
// color palette
var color = d3.scaleOrdinal()
.domain(taxa)
.range(fillColors);
//Margins
var margin = { top: 20, right: 20, bottom: 60, left: 50},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Define dom and svg
var dom = d3.select("#viz");
var svg = dom.selectAll("multipleLineCharts")
.data(dataNested)
.enter()
.append("div")
.attr("class", "chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
//.attr("fake", function(d) {console.log("d inside svg:"); console.log(d);})
// Add X axis --> it is a date format
var xScale = d3.scaleTime()
.rangeRound([0, width])
xScale.domain(d3.extent(data, function(d) {return d.date; }));
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(d3.axisBottom(xScale))
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("dx", "-0.8em")
.attr("dy", "-0.45em")
//Add Y axis - Here because we want all panels to be on same scale, we cant use the dates from the global data structure.
var yScale = d3.scaleLinear()
.domain([
d3.min(data, function(d) { return d.abundance; } ),
d3.max(data, function(d) { return d.abundance; } )
])
.range([ height, 0 ]);
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale).ticks(5));
//Add Z scale (colors)
var zScale = d3.scaleOrdinal()
.range(fillColors);
zScale.domain(taxa);
// generate lines.
svg
.append("path")
.attr("class", "line")
.style("stroke", function(d) { return zScale(d.key); })
.attr("d", function(d, i){
return d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.abundance); })
(data); //I know something else should go in there, but can't figure out what/how exactly...
})
/* Util functions */
function onlyUniqueArray(value, index, self) {
return self.indexOf(value) === index;
}
I don't understand how to effectively handle my data structure for what I want to do...
Is my 2x nested data structure is adequate for what I'm trying to accomplish? I've tried with a one level nested data structure, but with no success.
Finally solved it. This example helped me to understand how to handle nested selections : http://bl.ocks.org/stepheneb/1183998
Essentially, the last block of code was replaced with this:
// generate lines.
var lines = svg.selectAll("lines")
.data(function(d) { return d.values;})
.enter()
.append("path")
.attr("class", "line")
.attr("d", function(d){
return d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.abundance); })
(d.values);
})
.style("stroke", function(d) { return zScale(d.key); })
With a working example here: http://jtremblay.github.io/viz/example-fixed.html
Hey guys I created a time series line chart using publicly available stock data.
Where I got to is the following:
Looks like what it is doing is connecting the first datapoint with the last datapoint which is why it is creating a line across the entire chart.
I looked online and read that to create a non continuous line chart I can add
.defined(function(d) { return d; })
I did but it didn't help.
My code:
//Set dimensions and margins for the graph
var margin = {top: 20, right: 20, bottom: 100, left: 70},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//Create canvas
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Parse date
var parseDate = d3.timeParse("%Y-%m-%d");
//Set the ranges
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
// Define the line
var valueLine = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
//Import data from api
d3.json("api_all.php", function(error, data) {
if (error) throw error;
data.forEach(e => {
e.date = parseDate(e.date);
e.value = +e.close;
e.stockName = e.stock_name;
e.stockSymbol = e.stock_symbol;
});
//Create nest variable
var nest = d3.nest()
.key(function(d){ return d.stockSymbol; })
.entries(data);
console.log(nest);
//Scale the range of the data
//x axis scale for entire dataset
x.domain(d3.extent(data, function(d) { return d.date; }));
//y.domain([0, d3.max(data, function(d) { return d.value; })]);
//Add the x axis
var xaxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(d3.axisBottom(x));
//Add x axis label
svg.append("text")
.attr("transform", "translate(" + (width/2) + "," + (height + margin.top + 10) + ")")
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Date")
.attr("class", "x axis label");
//Create dropdown
var dropDown = d3.select("#dropDown")
dropDown
.append("select")
.selectAll("option")
.data(nest)
.enter()
.append("option")
.attr("value", function(d){ return d.key; })
.text(function(d){ return d.key; })
// Function to create the initial graph
var initialGraph = function(stock){
// Filter the data to include only stock of interest
var selectStock = nest.filter(function(d){
return d.key == stock;
})
console.log(selectStock)
//Unnest selectStock for y axis
var unnested = function(data, children){
var out = [];
data.forEach(function(d, i){
console.log(i, d);
d_keys = Object.keys(d);
console.log(i, d_keys)
values = d[children];
values.forEach(function(v){
d_keys.forEach(function(k){
if (k != children) { v[k] = d[k]}
})
out.push(v);
})
})
return out;
}
var selectStockUnnested = unnested(selectStock, "values");
//Scale y axis
var selectStockGroups = svg.selectAll(".stockGroups")
.data(selectStock, function(d){
return d ? d.key : this.key;
})
.enter()
.append("g")
.attr("class", "stockGroups")
.each(function(d){
y.domain([0, d3.max(selectStockUnnested, function(d) { return d.value; })])
console.log(selectStockUnnested);
});
var initialPath = selectStockGroups.selectAll(".line")
.data(selectStock)
.enter()
.append("path")
initialPath
.attr("d", function(d){ return valueLine(d.values) })
.attr("class", "line")
//Add the y axis
var yaxis = svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y)
.ticks(5)
.tickSizeInner(0)
.tickPadding(6)
.tickSize(0, 0));
//Add y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 60)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Price")
.attr("class", "y axis label");
}
// Create initial graph
initialGraph("1301.T")
// Update the data
var updateGraph = function(stock){
// Filter the data to include only stock of interest
var selectStock = nest.filter(function(d){
return d.key == stock;
})
console.log(selectStock);
//Unnest selectStock for y axis
var unnested = function(data, children){
var out = [];
data.forEach(function(d, i){
console.log(i, d);
d_keys = Object.keys(d);
console.log(i, d_keys)
values = d[children];
values.forEach(function(v){
d_keys.forEach(function(k){
if (k != children) { v[k] = d[k]}
})
out.push(v);
})
})
return out;
}
var selectStockUnnested = unnested(selectStock, "values");
// Select all of the grouped elements and update the data
var selectStockGroups = svg.selectAll(".stockGroups")
.data(selectStock)
.each(function(d){
y.domain([0, d3.max(selectStockUnnested, function(d) { return d.value; })])
});
// Select all the lines and transition to new positions
selectStockGroups.selectAll("path.line")
.data(selectStock)
.transition()
.duration(1000)
.attr("d", function(d){
return valueLine(d.values)
})
// Update the Y-axis
d3.select(".y")
.transition()
.duration(1500)
.call(d3.axisLeft(y)
.ticks(5)
.tickSizeInner(0)
.tickPadding(6)
.tickSize(0, 0));
}
// Run update function when dropdown selection changes
dropDown.on('change', function(){
// Find which stock was selected from the dropdown
var selectedStock = d3.select(this)
.select("select")
.property("value")
console.log(selectedStock);
// Run update function with the selected stock
updateGraph(selectedStock)
});
});
</script>
</body>
I'm trying to get 2 completely different d3 charts (2 line charts but totally different data - one with several lines and negative data, other with one line positive data) on the same page.
Right now, I only get the first one to be generated and shown correctly on the HTML page, the second chart doesn't show at all (not even svg container is generated).
Here is my code:
(function() {
// Get the data
d3.json("../assets/js/json/temperature.json", function(data) {
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 25},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.temps); })
.y(function(d) { return y(d.temperature); });
// prepare data
data.forEach(function(d) {
d.temps = parseDate(d.temps);
d.temperature = +d.temperature;
});
// Adds the svg canvas
var svg = d3.select("#graphTemp")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data on domain
x.domain(d3.extent(data, function(d) { return d.temps; }));
y.domain([0, d3.max(data, function(d) { return d.temperature; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperatures");
});
})();
(function(){
// loads the data and loads it into chart - main function
d3.json("../assets/js/json/maitrise.json", function(data) {
var m = {top: 20, right: 5, bottom: 30, left: 40},
w = 70 - m.left - m.right,
h = 30 - m.top - m.bottom;
var x = d3.scale.linear().domain([0, data.length]).range([0 + m.left, w - m.right]);
var y = d3.scale.linear()
.rangeRound([h, 0]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d,i) { return x(i); })
.y(function (d) { return y(d.value); });
var color = d3.scale.ordinal()
.range(["#28c6af","#ffd837","#e6443c","#9c8305","#d3c47c"]);
var svg2 = d3.select("#maitrisee").append("svg")
.attr("width", w + m.left + m.right)
.attr("height", h + m.top + m.bottom)
.append("g")
.attr("transform", "translate(" + m.left + "," + m.top + ")");
// prep axis variables
var xAxis2 = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis2 = d3.svg.axis()
.scale(y)
.orient("left");
//console.log("Inital Data", data);
var labelVar = 'id'; //A
var varNames = d3.keys(data[0])
.filter(function (key) { return key !== labelVar;}); //B
color.domain(varNames); //C
var seriesData = varNames.map(function (name) { //D
return {
name: name,
values: data.map(function (d) {
return {name: name, label: d[labelVar], value: +d[name]};
})
};
});
console.log("seriesData", seriesData);
y.domain([
d3.min(seriesData, function (c) {
return d3.min(c.values, function (d) { return d.value; });
}),
d3.max(seriesData, function (c) {
return d3.max(c.values, function (d) { return d.value; });
})
]);
var series = svg2.selectAll(".series")
.data(seriesData)
.enter().append("g")
.attr("class", function (d) { return d.name; });
series.append("path")
.attr("class", "line")
.attr("d", function (d) { return line(d.values); })
.style("stroke", function (d) { return color(d.name); })
.style("stroke-width", "2px")
.style("fill", "none");
});
})();
OK, I found where the error was coming from. There was a piece of javascript in the middle of the HTML page that stopped d3 to generate the second graph further down in the page.
Thanks for all the help!
I have some data ranging from 2003 - 2007 plotted as a line graph using the following code:
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.price); });
and later when I've pulled my data in:
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
context.append("path")
.datum(data)
.attr("d", area);
I've implemented a brush to filter the data. It works like this one:
http://bl.ocks.org/mbostock/4349545
But instead of a scatterplot, I have a line graph. I want to select arbitrary portions of the graph area and recolour it based on the brush selection. Just like the second graph on this yahoo chart:
http://uk.finance.yahoo.com/echarts?s=SAN.MC#symbol=san.mc;range=20040915,20131007;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined;
I have a brush function that's fired on brushmove:
function brushmove() {
var s = brush.extent();
console.log(s);
}
which logs out the selected range correctly. I'm just not sure how to select a portion of my graph area based on the range coming back from the brushmove function.
Full code is here:
//specify some margins
var margin = {top: 500, right: 10, bottom: 20, left: 40},
width = 960,
height = 100;
var bigMargin = {top: 20, right: 10, bottom: 20, left: 40},
bigWidth = 960,
bigHeight = 400;
//parse the date
var parseDate = d3.time.format("%b %Y").parse;
//create scales
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]);
//create scales
var bigX = d3.time.scale().range([0, bigWidth]),
bigY = d3.scale.linear().range([bigHeight, 0]);
//create axis
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var bigXAxis = d3.svg.axis().scale(bigX).orient("bottom"),
bigYAxis = d3.svg.axis().scale(bigY).orient("left");
//create a brush area accessor function
var brush = d3.svg.brush()
.x(x)
.on("brush", brushmove);
//create an area accessor function
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.price); });
var bigArea = d3.svg.area()
.x(function(d) { return bigX(d.date); })
.y0(bigHeight)
.y1(function(d) { return bigY(d.price); });
//append the svg container
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", bigWidth)
.attr("height", bigHeight);
//append a container
var context = svg.append("g")
.attr('class','container')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bigContext = svg.append("g")
.attr('class','bigContainer')
.attr("transform", "translate(" + bigMargin.left + "," + bigMargin.top + ")");
//loop over the data
d3.csv("data.csv", function(error, data) {
//coerce the data a little because values from .CSv are always strings
data.forEach(function(d) {
d.date = parseDate(d.date);
d.price = +d.price;
});
//set the scale domains based on the data
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
bigContext.append("path")
.datum(data)
.attr("clip-path", "url(#clip)")
.attr("fill","red")
.attr("d", bigArea);
//set the scale domains based on the data
bigX.domain(d3.extent(data.map(function(d) { return d.date; })));
bigY.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
var t = new Date(2003, 0, 1);
//append the graph as an area
context.append("path")
.datum(data)
.attr("d", area).
attr("fill",function(d) {
//if the data is at a certain range then give it a particular fill
return (new Date(d.date) > t ? "orange" : "yellow"); });
//append the x axis
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//append the x axis
context.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);
//append the x axis
bigContext.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + bigHeight + ")")
.call(bigXAxis);
//append the x axis
bigContext.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(bigYAxis);
//append the brush
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height + 7)
});
function brushstart() {
svg.classed("selecting", true);
}
function brushmove() {
bigX.domain(brush.extent());
bigContext.select("path").attr("d", bigArea);
bigContext.select(".x.axis").call(bigXAxis);
}
I'm trying to display different data on a graph. The user can change the displayed data clicking on a radio button. I'm using a "Bubble chart" to render the data.
For each type of data I need to update the Yaxis (the domain is different).
Here is what I've done for now:
Chart initialisation
var svg = d3.select("body .main-content").append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height);
Initialise the Axis
initAxis();
function initAxis()
{
var y = d3.scale.linear().domain([0,1000]).range([height-margin, margin]).nice(),
x = d3.scale.linear().domain([0,23]).range([margin,width-margin]),
yAxis = d3.svg.axis().scale(y).orient("left"),
xAxis = d3.svg.axis().scale(x).orient("bottom");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin) + ")")
.call(xAxis);
}
Update the chart
function update(type)
{
// Get the data
type = type || 'default';
var m = max[type],
mi = min[type]+0.1,
data = dataset[type],
step = stp[type];
// Set the functions
var y = d3.scale.linear().domain([mi,m]).range([height-margin, margin]).nice();
var o = d3.scale.linear().domain([0,m]).range([.5,1]);
var r = d3.scale.linear().domain([0,Math.sqrt(m)]).range([0,30]);
var x = d3.scale.linear().domain([0,23]).range([margin,width-margin]);
var color = function (a, b) {
for (var c = (a - 0) / (m - 0), d = [], e = 0; 3 > e; e++) d.push(Math.round(K[0][e] +
c * (K[1][e] - K[0][e])));
d.push(b || 0.7);
return "rgba(" + d.join(",") + ")"
}
//Attach the data to the graph
var circle = svg.selectAll("circle").data(data);
// Update existing element
circle.attr("class", "update");
// Add new element
circle.enter()
.append("circle")
.attr("class", "enter")
.attr("stroke-width", 0)
.attr("stroke", "black")
.transition()
.duration(750)
.attr("y", 0)
.style("fill-opacity", 1);
// Apply attribute to new and updated element
circle.attr("cx", function(d,i) {return x(d.h);})
.attr("cy", function(d,i) {return y(d.v);})
.attr("r", function(d,i) {return r(Math.sqrt(d.v));})
.style("fill", function(d,i) {return color(d.v);})
.style("opacity", function(d,i) {return o(d.v);})
.on("click", function(d,i){window.open(d.name,'_blank');})
.on("mouseover", function(d,i){d3.select(this).style("fill", "red").attr("stroke-width", 1);})
.on("mouseout", function(d,i){d3.select(this).style("fill", function(d,i) {return color(d.v);}).attr("stroke-width", 0);})
.append("title")
.text(function(d) { return d.v+' '+ d.t+' (adjusted) - '+ d.d })
.transition()
.duration(750)
.attr("y", 0)
.style("fill-opacity", 1);
// Remove old elements
circle.exit()
.attr("class", "exit")
.transition(750)
.ease("linear")
.attr("cy", 0)
.style("opacity", 0.2)
.remove();
// Update the Axis
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
svg.selectAll("g .y.axis")
.call(yAxis)
svg.selectAll("g .x.axis")
.call(xAxis);
}
The circles are updated correctly (transitions are not working tho) but the axis are not changing and I can't see why. I'm a bit lost, I've looked at many example but I cannot see what I'm doing wrong.
I'm using d3.js version: v3.1.10
Maxime
It looks like you are using the wrong selector while updating the axes:
svg.selectAll("g .y.axis")
.call(yAxis);
svg.selectAll("g .x.axis")
.call(xAxis);
maybe should read:
svg.selectAll("g.y.axis")
.call(yAxis);
svg.selectAll("g.x.axis")
.call(xAxis);
Why are you using "g .y.axis"?
Try:
svg.select(".y.axis")
.call(yAxis);
And similar for x axis.