I want to update the point and axis as different option selection along with using tooltips. I select the value as a different option and select a different option. This code can also update the line with tooltips but when the line has updated the point of the previous line is exits but I want to remove those points when the line is updated.
var div = d3.select('body').append('div')
var margin = {top: 30, right: 30, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
// var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
console.log(formatTime);
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
// .tickFormat(formatPct)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.pop);
});
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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 + ")");
var dataFiltered = {};
var dataNested = {};
d3.csv("data2.csv", function (error, data) {
data.forEach(function (d) {
d.date = parseDate(d.year);
d.pop = +d.population;
d.value = +d.days;
});
var dataNested = d3.nest()
.key(function (d) {
return d.days
})
.entries(data)
div.append('select')
.attr('id', 'variableSelect')
.on('change', variableChange)
.selectAll('option')
.data(dataNested).enter()
.append('option')
.attr('value', function (d) {
return d.key
})
.text(function (d) {
return d.key
})
var dataFiltered = dataNested.filter(function (d) {
return d.key === d3.select('#variableSelect').property('value')
})
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
// svg.append("path")
// .attr("class", "line")
// .attr("d", line(data));
// svg.select("dot")
// .data(data)
// .enter().append("circle")
// .attr("r", 4)
// .attr("cx", function (d) {
// return x(d.date);
// })
// .attr("cy", function (d) {
// return y(d.pop);
// })
function toolstip(div) {
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
return x(d.date);
})
.attr("cy", function (d) {
return y(d.pop);
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "," + d.pop)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
}
toolstip(div);
// xFormat = "%d-%m-%y";
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(xAxis).tickFormat(d3.timeFormat(xFormat)));
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis)
// .call(d3.axisLeft(yAxis))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// .text("Cumulative Return");
svg.append("path")
.datum(dataFiltered[0].values)
.attr("class", "line")
.attr("d", line);
function variableChange() {
var value = this.value;
var dataFiltered = dataNested.filter(function (d) {
return d.key === value
})
console.log(dataFiltered);
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
toolstip();
// svg.selectAll("dot")
d3.select('.xAxis').transition().duration(1000).call(xAxis)
d3.select('.yAxis').transition().duration(1000).call(yAxis)
d3.select('.line').datum(dataFiltered[0].values).attr('d', line)
}
}
);
I am converting some v2 code to v4 and I am stuck at this point. where does the x an y functions go for v4? Also is this the right way to create nested values? Thanks
d3.stack()
.offset(d3.stackOffsetSilhouette)
.value(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var layers = stack(nest.entries(mainVal));
Edited to add full code. Everything has been migrated to v4 but I'm just not sure about that section since layers is returning as an empty array.
<body>
<script src="http://d3js.org/d3.v4.js"></script>
<div class="chart">
</div>
<script>
chart("data.json", "orange");
var datearray = [];
var colorrange = [];
function chart(jsonpath, color) {
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];
var format = d3.timeFormat("%m/%d/%y");
var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "30px")
.style("left", "55px");
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height-10, 0]);
var z = d3.scaleOrdinal()
.range(colorrange);
var xAxis = d3.axisBottom()
.scale(x)
.tickFormat(d3.timeWeeks);
var yAxis = d3.axisLeft()
.scale(y);
var yAxisr = d3.axisRight()
.scale(y);
var stack = d3.stack()
.offset(d3.stackOffsetSilhouette)
.value(function(d) { return d.values; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.area()
.curve(d3.curveCardinal)
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".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 + ")");
var graph = d3.json(jsonpath, function(data) {
var parsed = [];
var mainVal = [];
for (var i = 0; i < data.length; i ++) {
var timeData = JSON.parse(data[i]).default.timelineData;
parsed.push(timeData);
}
for (var j = 0; j < parsed.length; j++) {
for (var k = 0; k < parsed[j].length; k++) {
obj = {};
var date = new Date(1000*parsed[j][k].time);
obj.value = parsed[j][k].value[0];
obj.date = date;
obj.key = 'arr' + j;
mainVal.push(obj);
}
}
mainVal.forEach(function(d) {
d.date = d.date;
d.value = +d.value;
});
var layers = nest.entries(mainVal);
x.domain(d3.extent(mainVal, function(d) {
return d.date; }));
y.domain([0, d3.max(mainVal, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) {
console.log(d.values);
console.log(area(d.values));
return area(d.values); })
.style("fill", function(d, i) {
return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxisr);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
mousedate = datearray.indexOf(invertedx);
pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
})
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")});
});
}
</script>
I have list of bars that are being displayed on the canvas and when I hover on the bar their respective values are getting displayed but that value is coming out of canvas at down. So please help and suggest thank you in advance!!
Here is my html file where I have my tooltip implementation
var margin = {
top: 20,
right: 0,
bottom: 80,
left: 40
};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear().range([height, 0]);
var hAxis = d3.svg.axis().scale(xScale).orient('bottom')
.ticks(4).tickSubdivide(2).tickSize(5, 5, 0)
.tickFormat(d3.time.format("%Y-%m-%d"))
var vAxis = d3.svg.axis().scale(yScale).orient('left');
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('background', '#f4f4f4')
.style('padding', '5 15px')
.style('border', '1px #333 solid')
.style('border-radius', '5px')
.style('opacity', 'o');
var line = d3.svg.line()
.x(function(d) {
return xScale(d.date);
})
.y(function(d) {
return yScale(d.value);
})
.interpolate("linear")
.tension(0.9);
function render(filterByDates) {
d3.select('svg').remove();
if (filterByDates) {
selectDate = true;
//tempData = fliterdata;
console.log("before date fliter data", fliterdata);
var date1 = new Date(document.getElementById('field1').value);
var date2 = new Date(document.getElementById('field2').value);
tempData = fliterdata.filter(function(d) {
console.log(date1, date2);
// alert(date1);
return d.date >= date1 && d.date <= date2;
});
console.log("After date tempData", tempData);
}
xScale.domain(tempData.map(function(d) {
return d.date;
}) .sort(function(a, b) {
return a - b;
}
)
);
yScale.domain([0, d3.max(tempData, function(d) {
return +d.value;
})]);
var svg = d3.select('#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 + ")");
svg
.append('g')
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(hAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
svg
.append('g')
.attr("class", "yaxis")
.call(vAxis)
if (chartType == 'bar') {
svg
.selectAll(".bar") //makes bar
.data(tempData)
.enter().append("rect")
.attr("class", "bar")
.style("fill", "teal")
.attr("x", function(d) {
return xScale(d.date);
}).attr("width", xScale.rangeBand())
.attr("y", function(d) {
return yScale(d.value);
}).attr("height", function(d) {
console.log("as", d.value);
return height - yScale(d.value);
})
//.text(function(d){return d.value + "%";})
.on('mouseover', function(d) {
tooltip.transition()
.style('opacity', 3)
tooltip.html(d.value)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pagey) + 'px')
d3.select(this).style('opacity', 0.5)
}).on('mouseout', function(d) {
tooltip.transition()
.style('opacity', 0)
d3.select(this).style('opacity', 1)
});
}
if (chartType == 'line') {
svg.append("path") // Add the line path.
.data(tempData)
.attr("class", "line")
.attr("d", line(tempData));
}
}
d3.json(jsonURL, function(data) {
myData = data; //data from json in mydata
myData.forEach(function(d) {
d.date = new Date(d.date);
d.date = new Date(d.date + " UTC");
});
console.log( 'mydatajson', myData);
$("#listbox").on("click", function() {
var key = $(this).val();
//console.log("key:", key);
var value = $('#listbox option:selected').text();
selectop = String(key);
selectop= "val0"+selectop;
fliterdata=myData.filter(function(d){
return d[key].slice(3) ==value;
}).map(function(d){
return {date:d.date,value:d[selectop].toString().replace(",",".")};
});
tempData=fliterdata;
if (selectDate)
render(true);
});
});
function selectChartType(type) {
chartType = type;
render(true);
}
</script>
I'm plotting a graph with this code (based on this example):
var colorrange = [];
function chart(data, desc_colors)
{
strokecolor = "#045A8D";
var mapPlotHeight = parseInt(d3.select("#map").style("height"));
var mapPlotHeight = parseInt(d3.select("#map").style("height"));
var sidebarWidth = parseInt(d3.select("#sidebar").style("width"));
var streamPlotMargin = {top: 20, right: 30, bottom: 30, left: 30};
var streamPlotWidth = document.body.clientWidth - streamPlotMargin.left - streamPlotMargin.right - sidebarWidth;
var streamPlotHeight = 200 - streamPlotMargin.top - streamPlotMargin.bottom;
var colorrange = [];
for (key in desc_colors)
{
colorrange.push(desc_colors[key]);
}
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", mapPlotHeight + 50 + streamPlotMargin.top + "px") // 50 of nav top
.style("left", sidebarWidth + 80 + "px");
var x = d3.scale.linear()
.range([0, streamPlotWidth]);
var y = d3.scale.linear()
.range([streamPlotHeight-10, 0]);
var z = d3.scale.ordinal()
.range(colorrange);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(24);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.hour; })
.y(function(d) { return d.value; });
// Group by key
var nest = d3.nest()
.key(function(d) { return d.key; })
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.hour); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".chart").attr("align","center")
.append("svg")
.attr("width", streamPlotWidth + streamPlotMargin.right + streamPlotMargin.left)
.attr("height", streamPlotHeight + streamPlotMargin.top + streamPlotMargin.bottom)
.append("g")
.attr("transform", "translate(" + streamPlotMargin.left + "," + streamPlotMargin.top + ")");
data.forEach(function(d) {
d.hour = d.hour;
d.value = +d.value;
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.hour; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + streamPlotHeight + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
console.log(invertedx);
pro = d.values[Math.round(invertedx)].value;
console.log(pro);
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
})
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "200px")
.style("top", mapPlotHeight + streamPlotMargin.bottom)
.style("bottom", "0px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")});
}
That results in something similar to this:
http://bl.ocks.org/WillTurman/raw/4631136/
However, I would like to update this chart based on a query.
I found these to examples:
http://bl.ocks.org/d3noob/7030f35b72de721622b8
http://bl.ocks.org/mbostock/4060954
But I don't know how to apply then to my code. I would like to do something different then having a function just for update a chart. I would like to, inside the chart() function, be able to check if a chart already exists. If so, I would just update it (data, x, y), using a transition.
I would like to do something different then having a function just for update a chart. I would like to, inside the chart() function, be able to check if a chart already exists.
If you want to check if a chart already exists, you can first assign an id to that chart, and then check if something with that id already exists when you need to decide if you should update the chart or otherwise.
Something like this
var svg = d3.select(".chart").attr("align","center")
.append("svg")
.attr("id", "svg-elem")
Then, use something along these lines to decide what to call next.
if(!d3.select("#svg-elem").node()){
// chart doesn't yet exist.
// call chart initilization code?
} else {
// call chart update code
}
I need to design a streamgraph using d3.js and I started to experiment with the code hosted on GitHub. Since my dataset is expected to have a varying range between the minimum and maximum values for date (it can be a period of one month or several years), I decided to use multi-scale format for the ticks on my x-axis instead of fixing the format and interval into weeks, months, years, etc. For example, if I leave the tick format the same way it is given in the sample code on GitHub
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.weeks);
and if the range of dates in my dataset spans for several years, the legend of the x-axis becomes crowded and unreadable.
I tried to use multi-scale format, but the visualization will not be drawn and the Dev tool of my browser returns the following error:
d3.time.format.multi is not a function
I sincerely hope someone can suggest me a solution for this problem.
Below you can see my full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.chart {
background: #fff;
}
p {
font: 12px helvetica;
}
.axis path, .axis line {
fill: none;
stroke: #000;
stroke-width: 2px;
shape-rendering: crispEdges;
}
button {
position: absolute;
right: 50px;
top: 10px;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.js"></script>
<div class="chart">
</div>
<script>
chart("tutorial.csv", "orange");
var datearray = [];
var colorrange = [];
function chart(csvpath, color) {
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];
var format = d3.time.format("%m/%d/%y");
var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "30px")
.style("left", "55px");
var customTimeFormat = d3.time.format.multi([
[".%L", function(d) { return d.getMilliseconds(); }],
[":%S", function(d) { return d.getSeconds(); }],
["%I:%M", function(d) { return d.getMinutes(); }],
["%I %p", function(d) { return d.getHours(); }],
["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
["%b %d", function(d) { return d.getDate() != 1; }],
["%B", function(d) { return d.getMonth(); }],
["%Y", function() { return true; }]
]);
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-10, 0]);
var z = d3.scale.ordinal()
.range(colorrange);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".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 + ")");
var graph = d3.csv(csvpath, function(data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(customTimeFormat);
var layers = stack(nest.entries(data));
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
mousedate = datearray.indexOf(invertedx);
pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
})
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")});
});
}
</script>
For start, I'm using the dataset from GitHub's sample:
key,value,date
AR,0.1,01/08/13
AR,0.15,01/09/13
AR,0.35,01/10/13
AR,0.38,01/11/13
AR,0.22,01/12/13
AR,0.16,01/13/13
AR,0.07,01/14/13
AR,0.02,01/15/13
AR,0.17,01/16/13
AR,0.33,01/17/13
AR,0.4,01/18/13
AR,0.32,01/19/13
AR,0.26,01/20/13
AR,0.35,01/21/13
AR,0.4,01/22/13
AR,0.32,01/23/13
AR,0.26,01/24/13
AR,0.22,01/25/13
AR,0.16,01/26/13
AR,0.22,01/27/13
AR,0.1,01/28/13
DJ,0.35,01/08/13
DJ,0.36,01/09/13
DJ,0.37,01/10/13
DJ,0.22,01/11/13
DJ,0.24,01/12/13
DJ,0.26,01/13/13
DJ,0.34,01/14/13
DJ,0.21,01/15/13
DJ,0.18,01/16/13
DJ,0.45,01/17/13
DJ,0.32,01/18/13
DJ,0.35,01/19/13
DJ,0.3,01/20/13
DJ,0.28,01/21/13
DJ,0.27,01/22/13
DJ,0.26,01/23/13
DJ,0.15,01/24/13
DJ,0.3,01/25/13
DJ,0.35,01/26/13
DJ,0.42,01/27/13
DJ,0.42,01/28/13
MS,0.21,01/08/13
MS,0.25,01/09/13
MS,0.27,01/10/13
MS,0.23,01/11/13
MS,0.24,01/12/13
MS,0.21,01/13/13
MS,0.35,01/14/13
MS,0.39,01/15/13
MS,0.4,01/16/13
MS,0.36,01/17/13
MS,0.33,01/18/13
MS,0.43,01/19/13
MS,0.4,01/20/13
MS,0.34,01/21/13
MS,0.28,01/22/13
MS,0.26,01/23/13
MS,0.37,01/24/13
MS,0.41,01/25/13
MS,0.46,01/26/13
MS,0.47,01/27/13
MS,0.41,01/28/13
RC,0.1,01/08/13
RC,0.15,01/09/13
RC,0.35,01/10/13
RC,0.38,01/11/13
RC,0.22,01/12/13
RC,0.16,01/13/13
RC,0.07,01/14/13
RC,0.02,01/15/13
RC,0.17,01/16/13
RC,0.33,01/17/13
RC,0.4,01/18/13
RC,0.32,01/19/13
RC,0.26,01/20/13
RC,0.35,01/21/13
RC,0.4,01/22/13
RC,0.32,01/23/13
RC,0.26,01/24/13
RC,0.22,01/25/13
RC,0.16,01/26/13
RC,0.22,01/27/13
RC,0.1,01/28/13
CG,0.1,01/08/13
CG,0.15,01/09/13
CG,0.35,01/10/13
CG,0.38,01/11/13
CG,0.22,01/12/13
CG,0.16,01/13/13
CG,0.07,01/14/13
CG,0.02,01/15/13
CG,0.17,01/16/13
CG,0.33,01/17/13
CG,0.4,01/18/13
CG,0.32,01/19/13
CG,0.26,01/20/13
CG,0.35,01/21/13
CG,0.4,01/22/13
CG,0.32,01/23/13
CG,0.26,01/24/13
CG,0.22,01/25/13
CG,0.16,01/26/13
CG,0.22,01/27/13
CG,0.1,01/28/13
RI,0.1,01/08/13
RI,0.15,01/09/13
RI,0.35,01/10/13
RI,0.38,01/11/13
RI,0.22,01/12/13
RI,0.16,01/13/13
RI,0.07,01/14/13
RI,0.02,01/15/13
RI,0.17,01/16/13
RI,0.33,01/17/13
RI,0.4,01/18/13
RI,0.32,01/19/13
RI,0.26,01/20/13
RI,0.35,01/21/13
RI,0.4,01/22/13
RI,0.32,01/23/13
RI,0.26,01/24/13
RI,0.22,01/25/13
RI,0.16,01/26/13
RI,0.22,01/27/13
RI,0.1,01/28/13
Your code is using d3 version 2. Try using the third version instead :
http://d3js.org/d3.v3.js