I am trying to add tooltip on a multiple lines chart following this example.
I want the tooltips show on both lines at the same time when mouse over either of them, like the example here. In my real case, I have four lines.
Here is my jsbins https://jsbin.com/budonapeki/edit?html,js,console,output
Hit "Run with JS" on the top right corner to see the chart.
My questions are...
In my jsbins, the tooltips are only showing on the first point of the line and the other tooltips do not show when mouse moves. Can anyone help to point out why?
How can I make the tooltips showing on the lines at the same time without repeating too many codes? Since I am using d3.nest()to convert the array, I am not sure if this affect the work of tooltips.
Appreciate!
Updated
Following the link in Mark's comment, I get the tooltips done finally.
But I have some other questions...
This is my updated JSbins https://jsbin.com/hoceneneso/edit?html,js,console,output
The first question is.. In my chart, there are two buttons on the right side, the line can disappear or appear when click the buttons. And the corresponding tooltip of the line should disappear or appear with the line together. But in my chart, the tooltips are still there, even I click the button.
I was trying to remove and change the opacity of the tooltips, but I am still not able to make it work. Does anyone have idea about this?
Second question is ..I was trying to make the tooltip start showing at "name1" which is the start point of the lines. I know the grey rectangle is to catch mouse movements on canvas, so I was trying to move the rectangle by .attr("transform", "translate(180,3)") but tooltips still show when mouseover y-axis. Can any explain why and suggestions?
Thanks a lot!
First question, set a unique id to each "mouse-per-line" so you can toggle it's opacity:
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
In your legend click handler:
d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
Second question, instead of transform to move the rect, set the x and width attributes. You can make it dynamic by:
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
...
Updated code:
var data1 = [
{x: "Name1", y: 2.5, label: "A"},
{x: "Name2", y: 3.5, label: "A"},
{x: "Name3", y: 4.7, label: "A"},
{x: "Name1", y: 4.7, label: "B"},
{x: "Name2", y: 3.5, label: "B"},
{x: "Name3", y: 4.9, label: "B"},
];
var margin = {top: 20, right: 150, bottom: 60, left: 80},
width = 1160 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().
rangeBands([0, width], 0.4, 0.8);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var svg = d3.select("#lineChart").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 + ")");
x.domain(data1.map(function(d) { return d.x; }));
y.domain([0, d3.max(data1, function(d) { return d.y; })]);
svg.append("g").
attr("class", "x axis").
attr("transform", "translate(-70," + height + ")").
call(xAxis);
svg.append("g").
attr("class", "y axis").
call(yAxis);
var dataNest1 = d3.nest()
.key(function(d) {return d.label;})
.entries(data1);
//console.log(dataNest1)
var color = d3.
scale.
ordinal().
range(['red', 'blue']).
domain(d3.keys(data1[0]).
filter(function(key) {return key === 'label';}));
var legendSpace = width/dataNest1.length;
dataNest1.forEach(function(d,i) {
svg.append("path")
.attr("class", "line1")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID **
.attr("d", line(d.values));
svg.append("text")
.attr("x", width - margin.left + 50)
.attr("y", legendSpace/4 + i*(legendSpace/6))
.attr("class", "lineLegend1")
.attr("id", 'tagLegend'+d.key.replace(/\s+/g, '')) // assign ID **
.style("fill", function() {
return d.color = color(d.key); })
.on("click", function(){
console.log(d);
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
//.remove();
.transition().duration(500)
.style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line circle")
// .style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line text")
// .style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
})
.text(d.key);
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line1');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.key);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
.attr('height', height)
.attr('fill', 'grey')
.style('opacity', '0.4')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
//console.log(width/mouse[0])
var xQuater = y.invert(d3.mouse(this)[0]),
bisect = d3.bisector(function(d) { return d.x; }).right;
idx = bisect(d.values, xQuater);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y +")";
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset='utf-8'>
<title>Charts</title>
</head>
<body>
<div align="center" id="lineChart">
</div>
<style>
.axis {
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
color: #444444;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line2{
fill: none;
stroke: red;
stroke-width: 1.5px;
}
.line1{
fill: none;
stroke: blue;
stroke-width: 1.5px;
}
</style>
</body>
</html>
Related
In the following snippet (based on the answer of #Gerardo Furtado d3 multi line with mouse over cursor for both y AND x value) the mouse over cursor is interpolating the values between data points.
How is it possible that the cursor only shows values for the real data points?
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
var myData = "date New York San Francisco Austin\n\
20111001 63.4 62.7 72.2\n\
20111002 58.0 59.9 67.7\n\
20111006 58.8 57.0 77.0\n\
20111007 57.9 56.7 82.3\n\
20111008 61.8 56.8 78.9\n\
20111009 69.3 56.7 68.8\n\
20111010 71.2 60.1 68.7\n\
20111015 61.7 64.6 68.0\n\
20111016 61.8 61.6 70.6\n\
20111017 62.8 61.1 71.1\n\
20111018 60.8 59.2 70.0\n\
20111022 54.4 60.7 72.4\n";
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var parseDate2 = d3.time.format("%Y/%m/%d");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.temperature);
});
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 data = d3.tsv.parse(myData);
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "date";
}));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
date: d.date,
temperature: +d[name]
};
})
};
});
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([
d3.min(cities, function(c) {
return d3.min(c.values, function(v) {
return v.temperature;
});
}),
d3.max(cities, function(c) {
return d3.max(c.values, function(v) {
return v.temperature;
});
})
]);
var legend = svg.selectAll('g')
.data(cities)
.enter()
.append('g')
.attr('class', 'legend');
legend.append('rect')
.attr('x', width - 20)
.attr('y', function(d, i) {
return i * 20;
})
.attr('width', 10)
.attr('height', 10)
.style('fill', function(d) {
return color(d.name);
});
legend.append('text')
.attr('x', width - 8)
.attr('y', function(d, i) {
return (i * 20) + 9;
})
.text(function(d) {
return d.name;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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("Temperature (ºF)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
city.append("text")
.datum(function(d) {
return {
name: d.name,
value: d.values[d.values.length - 1]
};
})
.attr("transform", function(d) {
return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) {
return d.name;
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(cities)
.enter()
.append("g")
.attr("class", "mouse-per-line");
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.name);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', width) // can't catch mouse events on a g element
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
var xDate = x.invert(mouse[0]),
bisect = d3.bisector(function(d) { return d.date; }).right;
idx = bisect(d.values, xDate);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2) + " - "
+ parseDate2(xDate));
return "translate(" + mouse[0] + "," + pos.y +")";
});
});
</script>
</body>
</html>
I am using hierarchical D3.JS Bar chart.
here is the link
Click here to see the chart
I want to rotate this chart as vertical position.
The following is code is used to rotate the chart as vertical position
//svg Rotate
svg.attr("transform", function (d) {
return "rotate(-90)"
});
But chart is going towards top of the browser.
Click here to see the chart after that code has changed
when i add the following code.
svg.attr("transform", function (d) {
return "rotate(-90deg)"
});
The chart going inside to the browser the attachment
see the chart after i add -90 deg
Can anyone tell me how to show the display as per my requirement.
Thanks
Vinoth,
As #Terry said in his comment this is an X-Y problem. You are asking "how do I rotate the chart?"; when you should be asking "how do I redraw the chart to be vertical?". Well, here it is all refactored:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 10px sans-serif;
}
rect.background {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 10, right: 120, bottom: 120, left: 120},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y = d3.scale.linear()
.range([height, 0]);
var barHeight = 20;
var color = d3.scale.ordinal()
.range(["steelblue", "#ccc"]);
var duration = 750,
delay = 25;
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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 + ")");
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", up);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.append("line")
.attr("x1", "100%");
svg.append("g")
.attr("class", "y axis");
d3.json("https://jsonblob.com/api/f577d19c-0f2b-11e7-a0ba-09040711ce47", function(error, root) {
if (error) throw error;
partition.nodes(root);
y.domain([0, root.value]).nice();
down(root, 0);
});
function down(d, i) {
if (!d.children || this.__transition__) return;
var end = duration + d.children.length * delay;
// Mark any currently-displayed bars as exiting.
var exit = svg.selectAll(".enter")
.attr("class", "exit");
// Entering nodes immediately obscure the clicked-on bar, so hide it.
exit.selectAll("rect").filter(function(p) { return p === d; })
.style("fill-opacity", 1e-6);
// Enter the new bars for the clicked-on data.
// Per above, entering bars are immediately visible.
var enter = bar(d)
.attr("transform", stack(i))
.style("opacity", 1);
// Have the text fade-in, even though the bars are visible.
// Color the bars as parents; they will fade to children if appropriate.
enter.select("text").style("fill-opacity", 1e-6);
enter.select("rect").style("fill", color(true));
// Update the x-scale domain.
y.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();
// Update the x-axis.
svg.selectAll(".y.axis").transition()
.duration(duration)
.call(yAxis);
// Transition entering bars to their new position.
var enterTransition = enter.transition()
.duration(duration)
.delay(function(d, i) { return i * delay; })
.attr("transform", function(d, i) { return "translate(" + barHeight * i * 2.5 + "," + 0 + ")"; });
// Transition entering text.
enterTransition.select("text")
.style("fill-opacity", 1);
// Transition entering rects to the new y-scale.
enterTransition.select("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(!!d.children); });
// Transition exiting bars to fade out.
var exitTransition = exit.transition()
.duration(duration)
.style("opacity", 1e-6)
.remove();
// Transition exiting bars to the new y-scale.
exitTransition.selectAll("rect")
.attr("height", function(d) { return height - y(d.value); });
// Rebind the current node to the background.
svg.select(".background")
.datum(d)
.transition()
.duration(end);
d.index = i;
}
function up(d) {
if (!d.parent || this.__transition__) return;
var end = duration + d.children.length * delay;
// Mark any currently-displayed bars as exiting.
var exit = svg.selectAll(".enter")
.attr("class", "exit");
// Enter the new bars for the clicked-on data's parent.
var enter = bar(d.parent)
.attr("transform", function(d, i) { return "translate(" + barHeight * i * 2.5 + "," + 0 + ")"; })
.style("opacity", 1e-6);
// Color the bars as appropriate.
// Exiting nodes will obscure the parent bar, so hide it.
enter.select("rect")
.style("fill", function(d) { return color(!!d.children); })
.filter(function(p) { return p === d; })
.style("fill-opacity", 1e-6);
// Update the y-scale domain.
y.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();
// Update the y-axis.
svg.selectAll(".y.axis").transition()
.duration(duration)
.call(yAxis);
// Transition entering bars to fade in over the full duration.
var enterTransition = enter.transition()
.duration(end)
.style("opacity", 1);
// Transition entering rects to the new y-scale.
// When the entering parent rect is done, make it visible!
enterTransition.select("rect")
.attr("height", function(d) { return height - y(d.value); })
.attr("y", function(d) { return y(d.value); })
.each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });
// Transition exiting bars to the parent's position.
var exitTransition = exit.selectAll("g").transition()
.duration(duration)
.delay(function(d, i) { return i * delay; })
.attr("transform", stack(d.index));
// Transition exiting text to fade out.
exitTransition.select("text")
.style("fill-opacity", 1e-6);
// Transition exiting rects to the new scale and fade to parent color.
exitTransition.select("rect")
.attr("height", function(d) { return height - y(d.value); })
.attr("y", function(d) { return y(d.value); })
.style("fill", color(true));
// Remove exiting nodes when the last child has finished transitioning.
exit.transition()
.duration(end)
.remove();
// Rebind the current parent to the background.
svg.select(".background")
.datum(d.parent)
.transition()
.duration(end);
}
// Creates a set of bars for the given data node, at the specified index.
function bar(d) {
var bar = svg.insert("g", ".x.axis")
.attr("class", "enter")
.attr("transform", "translate(15,0)")
.selectAll("g")
.data(d.children)
.enter().append("g")
.style("cursor", function(d) { return !d.children ? null : "pointer"; })
.on("click", down);
bar.append("text")
.attr("x", barHeight / 2)
.attr("y", height + 10)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d.name; })
.attr("transform", "rotate(45 " + (barHeight / 2) + " " + (height + 10) + ")")
bar.append("rect")
.attr("width", barHeight)
.attr("height", function(d) { return height - y(d.value); })
.attr("y", function(d) { return y(d.value); });
return bar;
}
// A stateful closure for stacking bars horizontally.
function stack(i) {
var y0 = 0;
return function(d) {
var tx = "translate(" + barHeight * i * 1.5 + "," + y0 + ")";
y0 += y(d.value);
return tx;
};
}
</script>
I'm trying to make an interactive line-chart with d3.js. I get the datas from two csv files (emissions.csv and gdp.csv) and I would like that when i pass with the mouse on the graph, it shows a kind of label with information on the corresponding point on the line. Now I have to pass the mouse ON the line to show the label and I can't figure out how to do what i want to do. I've found this example that shows what I want but I cant understand some of the code-lines and I can't understand how to use it on mine graph.
Here my code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
/*display: none;*/
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 150},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
//.interpolate("basis")
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.emission); });
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 + ")");
d3.csv("europe_emission.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "year"; }));
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {year: d.year, emission: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([
0,
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.emission; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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("Emission (thousand metric tons of CO2)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
city.append("text")
.datum(function(d) {
return {
name: d.name,
value: d.values[d.values.length - 1]
};
})
.attr("transform", function(d) {
return "translate(" + x(d.value.year) + "," + y(d.value.emission) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) {
return d.name;
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(cities)
.enter()
.append("g")
.attr("class", "mouse-per-line");
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.name);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', width) // can't catch mouse events on a g element
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
//console.log(width/mouse[0])
var xDate = x.invert(mouse[0]),
bisect = d3.bisector(function(d) { return d.year; }).right;
idx = bisect(d.values, xDate);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y +")";
});
});
});
</script>
europe_emission.csv:
year,UnitedKingdom,Italy,France,Spain,Germany
2012,483423,386666,368845,276636,821717
2011,464036,413379,364819,280922,810441
2010,504997,424993,391075,280377,829401
2009,487442,414809,381992,293732,785602
2008,536733,463695,400720,333181,851111
2007,554251,475436,407254,363744,848548
2006,561128,483533,416414,356712,873246
2005,561101,488078,425740,365478,861733
2004,563962,489367,422201,350071,881743
2003,562296,486559,420492,333168,893599
2002,551553,470530,412019,328878,890875
2001,567904,468283,416267,308786,907541
2000,556667,462277,415079,308026,891515
1999,548047,458824,418193,294901,887890
1998,555499,453524,426564,271515,915176
1997,550525,442371,404884,263303,923080
1996,575026,438303,411302,250543,951863
1995,553701,444943,398480,262860,930857
1994,562061,419903,391681,249451,932485
1993,568100,427170,391484,237253,948683
1992,581828,433867,413020,245814,957561
1991,598323,434156,423121,237179,1004735
1990,591499,434656,398769,227508,1042065
This took me way too long to figure out, but it's your data sorting. My link above assumed an ascending x axis values, you have descending, so your paths are draw backwards right to left. Either sort your data, or change the search function to go right to left:
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true) {
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) beginning = target; //<-- this was end = target
else if (pos.x < mouse[0]) end = target; //<-- this was beginning = target
else break;
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y + ")";
});
Fixed code here.
I'm using code similar to this one, and actually plugged in this code to see if I get the same error and I do. This is the code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: start;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 40, bottom: 70, left: 50},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxisLeft = d3.svg.axis().scale(y0)
.orient("left").ticks(5);
var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.close); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.open); });
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 data = [
{"date":"9-Apr-12","close":436,"open":9.04},
{"date":"7-Apr-12","close":221,"open":4.02},
{"date":"5-Apr-12","close":113,"open":9.02},
{"date":"4-Apr-12","close":64,"open":32.05},
{"date":"3-Apr-12","close":29,"open":46.03},
{"date":"2-Apr-12","close":18,"open":51.03}
];
// Get the data
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y0.domain([0, d3.max(data, function(d) {
return Math.max(d.close); })]);
y1.domain([0, d3.max(data, function(d) {
return Math.max(d.open); })]);
svg.append("path")
.attr("class", "line")
.attr("id", "blueLine")
.attr("d", valueline(data));
svg.append("path")
.attr("class", "line")
.style("stroke", "red")
.attr("id", "redLine")
.attr("d", valueline2(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// edit the Y Axis Left
svg.append("g")
.attr("class", "y axis")
.style("fill", "steelblue")
.attr("id", "blueAxis")
.call(yAxisLeft);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "red")
.attr("id", "redAxis")
.call(yAxisRight);
// Add the blue line title
svg.append("text")
.attr("x", 0)
.attr("y", height + margin.top + 10)
.attr("class", "legend")
.style("fill", "steelblue")
.on("click", function(){
// Determine if current line is visible
var active = blueLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#blueLine").style("opacity", newOpacity);
d3.select("#blueAxis").style("opacity", newOpacity);
// Update whether or not the elements are active
blueLine.active = active;
})
.text("Blue Line");
// Add the red line title
svg.append("text")
.attr("x", 0)
.attr("y", height + margin.top + 30)
.attr("class", "legend")
.style("fill", "red")
.on("click", function(){
// Determine if current line is visible
var active = redLine.active ? false : true ,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#redLine").style("opacity", newOpacity);
d3.select("#redAxis").style("opacity", newOpacity);
// Update whether or not the elements are active
redLine.active = active;
})
.text("Red Line");
</script>
</body>
I'm getting errors saying that 'blueline' and 'redline' are not defined.
Where do I define those?
I've looked at similar code where the html, css, and js are separated into their own files which is how I've done it also, and other than what I see in the code above I don't find those variables used anyplace else or defined beyond what is there.
I made a plunk with the code you have there and everything works just fine. Let me explain a little of what is going on though.
Instead of using HTML that is already there, D3 will often generate its own (in fact it has to generate its own to do the visualizations). You see this with statements like the following:
svg.append("path")
.attr("class", "line")
.attr("id", "blueLine")
.attr("d", valueline(data));
D3 just created a path element and appended it to the svg element it created earlier. It gives this particular element an id of blueLine which it uses later to apply styles. It did not exist in any HTML prior to this script running. D3 created it.
So, my code is here if you want to check it out.
Anyway, I'm developing a multi-line graph with tooltips and a legend that has each line disappear with a click. Only issue is, my lines don't want to generate inside the loop (in my case, dataNest) that will let me create a unique ID for each line.
This is the code I need to get working inside that loop:
svg.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
.attr("d", line(d.values));
Nesting your data with d3.nest() using key() will give you a different data structure for dataNest.
nest.key(function)
...Each time a key is registered, it is pushed onto the end of an internal keys array, and the resulting map or entries will have an additional hierarchy level.
nest.key(function)
So you have to call line when filling d attribute like this .attr("d", line(d.values[0].values)) .
Here are some examples on how d3.nest() works.
function init(){
var data = [
{
"label":"internal",
"values":[
{"week":1,"val":37},
{"week":2,"val":38},
{"week":3,"val":33},
{"week":4,"val":32},
{"week":5,"val":40},
{"week":6,"val":27},
{"week":7,"val":30},
{"week":8,"val":37},
{"week":9,"val":42},
{"week":10,"val":36},
{"week":11,"val":35},
{"week":12,"val":37},
{"week":13,"val":33}
]
},
{
"label": "high",
"values": [
{"week":1,"val":41},
{"week":2,"val":41},
{"week":3,"val":41},
{"week":4,"val":39},
{"week":5,"val":41},
{"week":6,"val":49},
{"week":7,"val":38},
{"week":8,"val":42},
{"week":9,"val":51},
{"week":10,"val":38},
{"week":11,"val":48},
{"week":12,"val":50},
{"week":13,"val":40},
]
},
{
"label": "low",
"values":[
{"week":1,"val":16},
{"week":2,"val":17},
{"week":3,"val":14},
{"week":4,"val":15},
{"week":5,"val":18},
{"week":6,"val":20},
{"week":7,"val":18},
{"week":8,"val":14},
{"week":9,"val":14},
{"week":10,"val":19},
{"week":11,"val":21},
{"week":12,"val":16},
{"week":13,"val":17},
],
},
{
"label":"average",
"values":[
{"week":1,"val":28.5},
{"week":2,"val":29},
{"week":3,"val":27.5},
{"week":4,"val":27},
{"week":5,"val":29.5},
{"week":6,"val":34.5},
{"week":7,"val":28},
{"week":8,"val":28},
{"week":9,"val":32.5},
{"week":10,"val":28.5},
{"week":11,"val":34.5},
{"week":12,"val":33},
{"week":13,"val":28.5}
]
}
]
var margin = {
top: 20,
right: 80,
bottom: 60,
left: 50
},
width = 895 - margin.left - margin.right,
height = 355 - margin.top - margin.bottom;
var x = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(6)
.tickSize(0);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(0);
var line = d3.svg.line()
.x(function (d) {return x(d.week);})
.y(function (d) {return y(d.val);})
.interpolate("Linear");
// Define 'div' for tooltips
var div = d3.select('#multiline').append("div") // declare the properties for the div used for the tooltips
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0); //
var svg = d3.select('#multiline').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 + ")");
color.domain(data.map(function (d) { return d.label; }));
data.forEach(function (kv) {
var labelName = kv.label;
kv.values.forEach(function (d) {
d.val = +d.val;
d.label = labelName;
});
});
var dataNest = d3.nest()
.key(function(d) {return d.label;})
.entries(data);
function make_y_axis() { // function for the y grid lines
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
var minY = d3.min(data, function (kv) { return d3.min(kv.values, function (d) { return d.val; }) });
var maxY = d3.max(data, function (kv) { return d3.max(kv.values, function (d) { return d.val + 5; }) });
var padding = width/(data[0].values.length + 1)/2;
x.domain(data[0].values.map(function (d) { return d.week; }))
.rangePoints([padding, width-padding]);
y.domain([0, 1.3*(maxY)]);
svg.append("svg:rect") // Grid lines Bakcground
.attr("x", 0)
.attr("y", 0)
.attr("height", height)
.attr("width", width)
.attr("fill", "#E6E6E6")
.style("opacity", "0.3");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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");
svg.append("g") // Draw the y Grid lines
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
var city = svg.selectAll(".branch")
.data(data)
.enter().append("g")
.attr("class", "branch");
city.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
})
.style("stroke", function (d) {
return color(d.label);
})
.style("fill", "none")
.style("stroke-width", 3);
svg.selectAll("g.dot")
.data(data)
.enter().append("g")
.attr("class", "dot")
.selectAll("circle")
.data(function(d) { return d.values; })
.enter().append("circle")
.attr("r", 2)
.attr("cx", function(d,i) { return x(d.week); })
.attr("cy", function(d,i) { return y(d.val); })
.style("stroke", function (d) {
return color(d.label);
})
.style("fill", "none")
.style("stroke-width", 3)
// Tooltip stuff after this
.on("mouseover", function(d) { // when the mouse goes over a circle, do the following
div.transition() // declare the transition properties to bring fade-in div
.duration(200) // it shall take 200ms
.style("opacity", .9); // and go all the way to an opacity of .9
div .html(d.label + "<br/>" + d.week + "<br/>" + d.val) // add the text of the tooltip as html
.style("left", (d3.event.pageX) + "px") // move it in the x direction
.style("top", (d3.event.pageY - 28) + "px"); // move it in the y direction
}) //
.on("mouseout", function(d) { // when the mouse leaves a circle, do the following
div.transition() // declare the transition properties to fade-out the div
.duration(500) // it shall take 500ms
.style("opacity", 0); // and go all the way to an opacity of nil
});
legendSpace = width/dataNest.length; // spacing for the legend
// Loop through each symbol / key
dataNest.forEach(function(d,i) {
svg.append("path")
.attr("class", "line")
.attr("d", line(d.values[0].values))
.attr("id", 'tag'+d.key.replace(/\s+/g, ''))
.style("stroke", color(d.label))
.style("fill", "none")
.style("stroke-width", 3);
// Add the Legend
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace) // space legend
.attr("y", height + (margin.bottom/2)+ 20)
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return d.color = color(d.key); })
.on("click", function(){
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
.text(d.key);
});
}
init();
.axis path, .axis line {
fill: none;
shape-rendering: crispedges;
stroke: none;
}
.axis line{
fill:none;
shape-rendering: crispedges;
stroke:grey;
}
.grid .tick {
stroke: grey;
opacity: 0.5 !important;
}
.bar rect {
fill: #ed1e79;
}
.bar text.value {
fill: black;
}
circle {
fill: blue;
stroke: blue;
stroke-width: 2;
}
.tooltip {
background: none repeat scroll 0 0 #ed1e79;
border: 0 solid #ffffff;
border-radius: 8px;
color: #ffffff;
font: 12px sans-serif;
height: 38px;
padding: 2px;
pointer-events: none;
position: absolute;
text-align: center;
width: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="multiline"></div>