Text inside non-transparent rectangle is not visible - d3.js

I have the following segment in one of my d3 graph.
What I want is to display some text in a rectangle.
var values = $('#<%=hdnDtArray.ClientID%>').val();
var data = JSON.parse(values);
margin = {
top: 20,
right: 60,
bottom: 20,
left: 100
};
var width = 900,
height = 350;
var vis = d3.select("#line_chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var parseTime = d3.time.format("%Y.%m.%d").parse;
max_y = 0;
min_y = data[0].close;
var extent = d3.extent(data.map(function(d) {
return d.date
}));
max_x = extent[1];
min = extent[0];
for (i = 0; i < data.length; i++) {
max_y = Math.max(max_y, data[i].close);
min_y = Math.min(min_y, data[i].close);
}
var x = d3.time.scale()
.rangeRound([margin.left, width]);
xScale = x.domain(d3.extent(data, function(d) {
return parseTime(d.date);
}));
yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0, max_y]),
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize(-width + margin.left)
.outerTickSize(0)
.tickPadding(10);
vis.append("svg:g")
.attr("class", "x axis")
.style({
'stroke': 'Black',
'fill': 'none',
"stroke-width": 1,
"font-size": "13px"
})
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.attr("transform", "translate(-10,0) rotate(-40)")
.style("text-anchor", "end");
vis.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width + 120)
.attr("y", height - 10)
.attr("font-weight", "bold");
vis.append("svg:g")
.attr("class", "y axis")
.style({
'stroke': 'Black',
'fill': 'none',
'stroke-width': 1,
"font-size": "13px"
})
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
vis.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", margin.left + 5)
.attr("y", margin.top - 2)
.attr("font-weight", "bold");
var line = d3.svg.line()
.x(function(d) {
return xScale(parseTime(d.date));
})
.y(function(d) {
return yScale(d.close);
})
.interpolate("basis");
vis.append('svg:path')
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
var hoverLineGroup = vis.append("g")
.attr("class", "hover-line");
var hoverLine = hoverLineGroup.append("line")
.attr("stroke", "#000000")
.attr("stroke-width", "1px")
.attr("x1", 10).attr("x2", 10)
.attr("y1", 20).attr("y2", height - 20);
var hoverTT = hoverLineGroup.append('text')
.attr("class", "hover-tex capo")
.attr('dy', "0.35em");
var cle = hoverLineGroup.append("circle")
.attr("r", 4.5);
var hoverTT2 = hoverLineGroup.append('text')
.attr("class", "hover-text capo")
.attr('dy', "0.55em");
hoverLineGroup.style("opacity", 1e-6);
var rectHover = vis.append("rect")
.data(data)
.attr("fill", "none")
.attr("width", width)
.attr("height", height);
var hoverCircle = hoverLineGroup.append("circle");
var hoverRect = hoverLineGroup
.append("rect");
vis.on("mouseout", hoverMouseOff)
.on("mousemove", hoverMouseOn);
var bisectDate = d3.bisector(function(d) {
return parseTime(d.date);
}).left;
function hoverMouseOn() {
var mouse_x = d3.mouse(this)[0];
var mouse_y = d3.mouse(this)[1];
var graph_y = yScale.invert(mouse_y);
var graph_x = xScale.invert(mouse_x);
var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);
var d0 = data[i - 1]
var d1 = data[i];
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
hoverRect.attr("class", "y")
.style("fill", "none")
.style("stroke", "black")
.attr('x', mouse_x + 8)
.attr('y', yScale(d.close) - 20)
.attr("width", 200)
.attr("height", 50);
hoverTT.text("Test Text")
.attr("opacity", "1");
hoverTT.attr('x', mouse_x + 23);
hoverTT.attr('y', yScale(d.close));
/*
hoverTT.text("Date: " + d.date);
hoverTT.attr('x', mouse_x + 23);
hoverTT.attr('y', yScale(d.close));
hoverTT2.text("Portfolio Value: " + Math.round(d.close * 100) / 100)
.attr('x', mouse_x + 23)
.attr('y', yScale(d.close) + 10);
*/
hoverLine.attr("x1", mouse_x).attr("x2", mouse_x)
hoverLineGroup.style({
'font-weight': 'bold',
'opacity': 1
});
hoverCircle.attr("class", "y")
.style("fill", "blue")
.style("stroke", "blue")
.attr("r", 4)
.attr('cx', mouse_x)
.attr('cy', yScale(d.close));
}
function hoverMouseOff() {
hoverLineGroup.style("opacity", 1e-6);
}
The text is not visible now. But if I set the "fill" property to "none", then the text becomes visible.
What I want is the background to be non transparent, that's why I made it white.
Still I want the text to be visible.

The problem with your code is the order of the selections.
In an SVG, just like a real painter using ink in a real canvas, what is painted later remains on top. So, if you want the text to be on top of the rectangle (with any fill you want), set the text's selection after the rectangle's selection.
Therefore, in your case, this...
var hoverTT = hoverLineGroup.append('text')
.attr("class", "hover-tex capo")
.attr('dy', "0.35em");
... has to be after this:
var hoverRect = hoverLineGroup
.append("rect");
Here is a demo, the rectangle has a solid white fill. Have a look at the order of the selections:
var svg = d3.select("svg");
var hoverRect = svg.append("rect")
.attr("fill", "white")
.attr("stroke", "firebrick")
.attr("width", 40)
.attr("height", 30)
.attr("opacity", 0);
var hoverText = svg.append("text")
.text("foo")
svg.on("mousemove", function() {
var coords = d3.mouse(this);
hoverRect.attr("x", coords[0] + 15)
.attr("y", coords[1])
.attr("opacity", 1)
hoverText.attr("x", coords[0] + 25)
.attr("y", coords[1] + 20)
})
svg {
border: 1px solid gray;
background-color: gainsboro;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Related

how to convert scatter chart into line chart in d3 version 3

I have implemented one scatter chart using d3.js. I want to convert this chart to line chart, but i am not able to do so. I have tried to follow ( http://embed.plnkr.co/wJDcZmkEzXaLVhuLZmcQ/ ) but it didn't helped me.
This is the code for scatter chart.
var data = [{"buildName":"otfa_R5-10_a1","build":"Build 1","value":"19628"},{"buildName":"otfa_R5-91_a1","build":"Build 2","value":"19628"},{"buildName":"otfa_R5-9_a1","build":"Build 3","value":"19628"}]
var yValues = [], responseData = [];
data.map(function(key) {
var test = [];
test[0] = key.build;
test[1] = key.value;
responseData.push(test);
yValues = key.value;
})
var margin = {
top: 20,
right: 15,
bottom: 60,
left: 60
},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(responseData.map(function(d) {
return d[0];
}))
.rangePoints([0, width], 0.5)
var y = d3.scale.linear()
.domain([5000,20000])
.range([height, 0]);
var chart = d3.select(divId)
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var colors = d3.scale.linear()
.domain([5, 20])
.range(['#4577bc', '#4577bc'])
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)" );
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(responseData)
.enter().append("svg:circle")
.attr("cx", function(d, i) {
return x(d[0]);
})
.attr("cy", function(d) {
return y(d[1]);
})
.attr("r", 6)
.style('stroke', function(d, i) {
return colors(i);
})
.style('fill', function(d, i) {
return colors(i);
})
.on("mouseover", function(d) {
d3.select(this).attr("r", 10).style("fill", "#fff8ee");
div.transition()
.duration(200)
.style("opacity", 2.9);
div .html((d[1]))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "#4577bc");
div.transition()
.duration(500)
.style("opacity", 0);
});
How we can add a line connecting these points ?
Please help me !!
To add a line to your existing chart, just add it using path generators.
Line generator:
var line = d3.svg.line()
.x(function (d) { return x(d[0]); })
.y(function (d) { return y(d[1]); });
Append the line to the svg:
g.append('path').classed('line', true)
.style( { fill: 'none', 'stroke': 'steelblue'} )
.attr('d', line(responseData));
Snippet with the above code included and a few CSS styles to make it look better:
var data = [{"buildName":"otfa_R5-10_a1","build":"Build 1","value":"19628"},{"buildName":"otfa_R5-91_a1","build":"Build 2","value":"10628"},{"buildName":"otfa_R5-9_a1","build":"Build 3","value":"17628"}]
var yValues = [], responseData = [];
data.map(function(key) {
var test = [];
test[0] = key.build;
test[1] = key.value;
responseData.push(test);
yValues = key.value;
})
var margin = {
top: 20,
right: 15,
bottom: 60,
left: 60
},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(responseData.map(function(d) {
return d[0];
}))
.rangePoints([0, width], 0.5)
var y = d3.scale.linear()
.domain([5000,20000])
.range([height, 0]);
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var colors = d3.scale.linear()
.domain([5, 20])
.range(['#4577bc', '#4577bc'])
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)" );
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(responseData)
.enter().append("svg:circle")
.attr("cx", function(d, i) {
return x(d[0]);
})
.attr("cy", function(d) {
return y(d[1]);
})
.attr("r", 6)
.style('stroke', function(d, i) {
return colors(i);
})
.style('fill', function(d, i) {
return colors(i);
})
.on("mouseover", function(d) {
d3.select(this).attr("r", 10).style("fill", "#fff8ee");
div.transition()
.duration(200)
.style("opacity", 2.9);
div .html((d[1]))
.style("left", (d3.event.pageX+4) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "#4577bc");
div.transition()
.duration(500)
.style("opacity", 0);
});
var line = d3.svg.line()
.x(function (d) { return x(d[0]); })
.y(function (d) { return y(d[1]); });
g.append('path').classed('line', true)
.style( { fill: 'none', 'stroke': 'steelblue'} )
.attr('d', line(responseData));
path.domain {
fill: none;
stroke: #000;
}
.axis text {
font-size: 12px;
}
div.tooltip {
position: absolute;
background: #FFF;
padding: 5px;
border: 1px solid #DDD;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>

d3 brushing and mouse move coexist

im trying to update http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a and add brushing into it(brushing displayed under the line graph) to make it look like https://www.google.com.hk/#q=s%26p+500
added coded to the first link:
var brush = d3.svg.brush()
.x(x)
.on("brush", brushmove)
.on("brushend", brushend);
svg.append("g")
.attr("class", "brush")
.call(brush)
.selectAll('rect')
.attr('height', height);
function brushmove() {
var extent = brush.extent();
}
function brushend() {
x.domain(brush.extent())
console.log(brush.extent());
}
The problem is that once i add brushing into it, there's a background formed behind the graph and i can't perform mouse events(mousemove) anymore.
Is there a way to fix it to make it look like google?
1) brushing and mouse event coexist
2) brushing area under the curve
var csv = date,close1, close2
26-Mar-12,606.98,58.13
27-Mar-12,614.48,53.98
28-Mar-12,617.62,67.00
29-Mar-12,609.86,89.70
30-Mar-12,599.55,99.00
2-Apr-12,618.63,130.28
3-Apr-12,629.32,166.70
4-Apr-12,624.31,234.98
5-Apr-12,633.68,345.44
9-Apr-12,636.23,443.34
10-Apr-12,628.44,543.70
11-Apr-12,626.20,580.13
12-Apr-12,622.77,605.23
13-Apr-12,605.23,626.20
16-Apr-12,580.13,628.44
17-Apr-12,543.70,636.23
18-Apr-12,443.34,633.68
19-Apr-12,345.44,624.31
20-Apr-12,234.98,629.32
23-Apr-12,166.70,618.63
24-Apr-12,130.28,599.55
25-Apr-12,99.00,609.86
26-Apr-12,89.70,617.62
27-Apr-12,67.00,614.48
30-Apr-12,53.98,606.98
1-May-12,58.13,503.15
Both the example you link to and the brush add a rect on top of the plot to capture mouse events. The key to making them coexist is to add the brush (and allow it to create its rect) and then use that rect to add the tooltip events. This way you only end up with one point-events rect:
// add a g for the brush
var context = svg.append("g");
// add the brush
context.call(brush);
// grab the brush's rect and add the tooltip events
context.select(".background")
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", mousemove);
Full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* set the CSS */
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;
}
.extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse,
formatDate = d3.time.format("%d-%b"),
bisectDate = d3.bisector(function(d) {
return d.date;
}).left;
// 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.date);
})
.y(function(d) {
return y(d.close);
});
var area = d3.svg.area()
.x(function(d) {
return x(d.date);
})
.y0(height)
.y1(function(d) {
return y(d.close);
});
// Adds the svg 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 + ")");
var defs = svg.append("defs");
var areaClip = defs.append("clipPath")
.attr("id", "areaClip")
.append("rect")
.attr("x", width)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var lineSvg = svg.append("g");
var focus = svg.append("g")
.style("display", "none");
var brush = d3.svg.brush()
.x(x)
.on("brush", function() {
var s = brush.extent(),
x1 = x(s[0]),
x2 = x(s[1]);
areaClip.attr('x', x1);
areaClip.attr('width', x2 - x1);
})
var csv = `date,close
26-Mar-12,606.98
27-Mar-12,614.48
28-Mar-12,617.62
29-Mar-12,609.86
30-Mar-12,599.55
2-Apr-12,618.63
3-Apr-12,629.32
4-Apr-12,624.31
5-Apr-12,633.68
9-Apr-12,636.23
10-Apr-12,628.44
11-Apr-12,626.20
12-Apr-12,622.77
13-Apr-12,605.23
16-Apr-12,580.13
17-Apr-12,543.70
18-Apr-12,443.34
19-Apr-12,345.44
20-Apr-12,234.98
23-Apr-12,166.70
24-Apr-12,130.28
25-Apr-12,99.00
26-Apr-12,89.70
27-Apr-12,67.00
30-Apr-12,53.98
1-May-12,58.13`;
var data = d3.csv.parse(csv);
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close+20;
})]);
// Add the valueline path.
lineSvg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
lineSvg.append("path")
.attr("d", area(data))
.style("fill", "steelblue")
.style("stroke", "none")
.style("opacity", "0.5")
.attr("clip-path", "url(#areaClip)")
// 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 the x line
focus.append("line")
.attr("class", "x")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);
// append the y line
focus.append("line")
.attr("class", "y")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", width)
.attr("x2", width);
// append the circle at the intersection
focus.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "blue")
.attr("r", 4);
// place the value at the intersection
focus.append("text")
.attr("class", "y1")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "-.3em");
focus.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em");
// place the date at the intersection
focus.append("text")
.attr("class", "y3")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4")
.attr("dx", 8)
.attr("dy", "1em");
// append the rectangle to capture mouse
var context = svg.append("g");
context.call(brush);
context.selectAll(".resize").append("path")
.attr("d", "M0,2V" + (height - 2))
.style("stroke", "black")
context.select(".extent")
.attr("height", height - 2)
.attr("fill", "none");
context.select(".background")
.attr("height", height)
.on("mouseover.tooltip", function() {
focus.style("display", null);
})
.on("mouseout.tooltip", function() {
focus.style("display", "none");
})
.on("mousemove.tooltip", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.select("circle.y")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")");
focus.select("text.y1")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y2")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y3")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select("text.y4")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select(".x")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.attr("y2", height - y(d.close));
focus.select(".y")
.attr("transform",
"translate(" + width * -1 + "," +
y(d.close) + ")")
.attr("x2", width + width);
}
</script>
</body>

How to move the mean fixed line in the scatter plot?

I have a scatter plot that don't zoom and don't move the line of mean when drag and zoom.
The mean line stay fixed.
var margin = {top: 50, right: 20, bottom: 100, left: 80};
var width = 1024 - margin.left - margin.right;
var height = 390;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
d3.json("data.json", function(error, data) {
data.forEach(function(d)
d.date = parseDate(d.date);
d.tiempo = +d.tiempo;
});
var x = d3.time.scale().range([0, width])
.domain(d3.extent(data, function(d) { return d.date; }))
.nice();
var y = d3.scale.linear().range([height, 0])
.domain([0, d3.max(data, function(d) { return d.tiempo; })])
.nice();
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 100])
.on("zoom", zoomed);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(15)
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(15)
.tickSize(-width);
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 + ")")
.call(zoom);
var Rect = svg.append("rect")
.attr("width", width)
.attr("height", height);
// Eje X
svg.append("g")
.classed("x axis", true)
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.classed("label", true)
.attr("x", width)
.attr("y", margin.bottom - 10)
.style("text-anchor", "end")
.text("Tiempo de llegada");
// Eje Y
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.classed("label", true)
.attr("transform", "rotate(-90)")
.attr("y", -margin.left)
.attr("dy", "1.91em")
.style("text-anchor", "end")
.text("Tiempos de espera")
// Objetos, puntos.
var objects = svg.append("svg")
.classed("objects", true)
.attr("width", width)
.attr("height", height);
objects.append("svg:line")
.classed("axisLine hAxisLine", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.attr("transform", "translate(0," + height + ")");
objects.append("svg:line")
.classed("axisLine vAxisLine", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", height);
var puntos = objects.selectAll(".dot")
.data(data)
.enter().append("circle")
.classed("dot", true)
.attr("r", 3.5)
.attr("class", function(d) {
if(d.d7up==1) {
return "dot s7";
}else if(d.d7do==1) {
return "dot b7";
};
return "dot pu";
});
puntos.attr("transform", transform);
var meanData = [
{date: data[0].date, tiempo: 6.22},
{date: data[data.length - 1].date, tiempo: 6.22}
];
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tiempo); });
var l = objects.selectAll(".lineamedia")
.data(meanData)
.enter().append("circle")
.classed("lineamedia", true)
.attr("r", 5)
.attr("stroke", "red")
.attr("fill", "red")
.attr("transform", transform);
var ll = objects.append("g")
.classed("grupolinea", true);
ll.append("line")
.attr("x1", x(meanData[0].date))
.attr("y1", y(meanData[0].tiempo))
.attr("x2", x(meanData[meanData.length - 1].date))
.attr("y2", y(meanData[meanData.length - 1].tiempo))
.attr("stroke", "red")
.attr("fill", "red")
.attr("stroke-width", 4)
.classed("medias", true);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
//svg.selectAll(".dot").attr("transform", transform);
puntos.attr("transform", transform);
l.attr("transform", transform);
//svg.select(".grupolinea").attr("transform", transform);
}
function transform(d) {
return "translate(" + x(d.date) + "," + y(d.tiempo) + ")";
}
})
My data array is:
var = data[{"date":"2016-04-25 07:37:24","tiempo":29.366666666667}, {"date":"2016-04-25 08:18:36","tiempo":8.4833333333333},{"date":"2016-04-25 08:32:15","tiempo":5.25},{"date":"2016-04-25 08:40:57","tiempo":2.4166666666667},{"date":"2016-04-25 08:41:09","tiempo":5.3166666666667},{"date":"2016-04-25 08:58:10","tiempo":5.5833333333333},{"date":"2016-04-25 09:00:20","tiempo":4.2166666666667},{"date":"2016-04-25 09:00:42","tiempo":5.2666666666667}]
Is a graph de times wait where
date: of comming patient;
time: time of wait;

D3 tooltip won't read my data

I am trying to make my tooltip read my data. But it won't. How do i make it read the data?
I do not understand why I can apply text labels in my chart by writing
.text(function(d) { return d; });
while the tooltip won't read it.
var data = {
labels: [
'Trøndelag', 'Innlandet', 'Oslo','Nordland','Sør-Øst', 'Alle distr.',
'Øst', 'Sør-Vest', 'Møre og R.',
'Troms', 'Vest', 'Finnmark',
],
series: [
{
label: 'Svært stor tillit',
values: [32, 29, 29, 22, 27, 27,31,25,24,26,26,20,24]
},
{
label: 'Ganske stor tillit',
values: [55,54,53,58,53,53,49,53,54,51,48,53,48]
},
{
label: 'Verken stor eller liten tillit',
values: [7,12,13,14,14,16,14,15,16,19,19,15]
},
{
label: 'Ganske liten tillit',
values: [4,4,3,2,3,3,3,3,4,5,4,4,7]
},
{
label: 'Svært liten tillit',
values: [1,1,2,3,3,2,1,3,3,1,2,4,6]
},
{
label: 'Vet ikke',
values: [0,0,1,0,0,0,1,1,0,0,0,0,1]
},
{
label: 'Ubesvart',
values: [0,0,0,0,0,0,0,0,0,0,0,0,0]
}
]
};
var margin = {top: 20, right: 5, bottom: 20, left: 5},
width = parseInt(d3.select('.chart').style('width'), 10),
width = width - margin.left - margin.right,
chartHeight = 1310,
groupHeight = barHeight * data.series.length,
gapBetweenGroups = 0,
spaceForLabels =62,
spaceForLegend = 64,
barHeight=14;
var zippedData = [];
for (var i=0; i<data.labels.length; i++) {
for (var j=0; j<data.series.length; j++) {
zippedData.push(data.series[j].values[i]);
}
}
// Color scale
var color = d3.scale.category20c();
var x = d3.scale.linear()
.domain([0, d3.max(zippedData)])
.range([0, width]);
var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);
d3.select(window).on('resize', resize);
function resize (){
width = parseInt(d3.select('.chart').style('width'),10);
width= width - margin.left - margin.right;
x.range([0,width]);
}
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");
// Specify the chart area and dimensions
var chart = d3.select(".chart")
.attr("width", spaceForLabels + width + spaceForLegend)
.attr("height", chartHeight);
// Create bars
var bar = chart.selectAll("g")
.data(zippedData)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
})
;
var legendPlass = 150;
var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);
// Create rectangles of the correct width
bar.append("rect")
.attr("fill", function(d,i) { return color(i % data.series.length); })
.attr("class", "bar")
.attr("width", x)
.attr('y', legendPlass )
.attr("height", barHeight - 1)
;
// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", legendPlass + barHeight / 2)
.attr("fill", "red")
.attr("dy", ".35em")
.text(function(d) { return d; });
// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) { return - 5; })
.attr("y", legendPlass)
.attr("dy", "1em")
.text(function(d,i) {
if (i % data.series.length === 0)
return data.labels[Math.floor(i/data.series.length)];
else
return ""});
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
.call(yAxis);
//CREATING THE TOOLTIP
chart.selectAll(".bar")
.on("click", function() {
tooltip.style("opacity", 0); })
.on("click", function(d) {
var pos = d3.mouse(this);
tooltip
.transition()
.duration(500)
.style("opacity", 1)
.style("left", d3.event.x + "px")
.style("top", d3.event.y + "px")
.text(function(d) { return d; });
});
// Draw legend
var legendRectSize = 16,
legendSpacing = 4;
var legend = chart.selectAll('.legend')
.data(data.series)
.enter()
.append('g')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = -gapBetweenGroups/2;
var horz = spaceForLegend;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d, i) { return color(i); })
.style('stroke', function (d, i) { return color(i); });
legend.append('text')
.attr('class', 'legend')
.attr('x', legendRectSize + legendSpacing )
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d.label; });
You need to append data to it to be able to read. You have this :
var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);
Needs to be like this :
var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);
var tooltipWithData = tooltip.data(data).enter();
Then use this later :
tooltipWithData
.transition()
.duration(500)
.style("opacity", 1)
.style("left", d3.event.x + "px")
.style("top", d3.event.y + "px")
.text(function(d) { return d; });

Horizontal pan with ordinal x axis in d3

I would like to have vertical zooming and horizontal panning with a simple bar chart. Here's my example: http://jsfiddle.net/bjames/rR7ee/.
Most of what I've tried involves viewBox and I understand I might have more luck with a clipPath. But all the examples I've found use a continuous x-axis in the zoom function to get the job done.
In my example, there are 8 bars but only 4 are visible. I'd like to drag the panel to the left. What am I missing?
Thanks in advance.
width = 600
height = 600
padding = {left:40, top:20, right:20, bottom:30}
size = {
x: width - padding.left - padding.right,
y: height - padding.top - padding.bottom
}
var svg = d3.select('.container').append('div')
.append("svg")
.attr("width", 300)
.attr("height", height)
.attr('class', 'frame')
.append("g")
.attr("transform", "translate(" + padding.left + "," +
padding.top + ")")
svg.append('rect')
.attr('class', 'background')
.attr('pointer-events', 'all')
.attr('fill', 'none')
.attr('height', size.y + 'px')
.attr('width', size.x + 'px')
var d = [5,6,7,8,9,10,11,12]
var x = d3.scale.ordinal()
.domain(d3.range(d.length))
.rangeRoundBands([0, size.x], .15)
var y = d3.scale.linear()
.domain([0,d3.max(d)])
.range([size.y, 0])
var xax = d3.svg.axis().scale(x)
.tickSize(-size.y).orient('bottom')
var yax = d3.svg.axis().scale(y)
.tickSize(-size.x).orient('left')
svg.append("g")
.attr("class", "y axis")
.call(yax)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + size.y+ ")")
.call(xax)
svg.append('g').attr('class', 'rects')
function update(){
var rects = d3.select('.rects').selectAll('rect')
.data(d)
rects.attr('x', function(d,i) { return x(i)})
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d)})
.attr('height', function(d) { return size.y - y(d)})
rects.enter().append('rect')
.attr('x', function(d,i) { return x(i) })
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d)})
.attr('height', function(d) { return size.y - y(d)})
.style('fill', 'orange')
svg.select('.y.axis')
.call(yax)
svg.select('.x.axis')
.call(xax)
svg.select('.background')
.call(zoom)
}
var zoom = d3.behavior.zoom()
.on("zoom", zoomed)
function zoomed() {
y.domain([0, d3.max(d)*1/d3.event.scale])
update();
}
update()
The vertical zooming was already implemented. I implemented the horizontal panning.
Note: Both zooming and panning happens on the rectangle in the background, as listeners attached to it.
I have added comments in the fiddle code that should help you out in the logic.
width = 600
height = 600
padding = {left:40, top:20, right:20, bottom:30}
size = {
x: width - padding.left - padding.right,
y: height - padding.top - padding.bottom
}
var svg = d3.select('.container').append('div')
.append("svg")
.attr("width", 300)
.attr("height", height)
.attr('class', 'frame')
.append("g")
.attr("transform", "translate(" + padding.left + "," +
padding.top + ")")
svg.append('rect')
.attr('class', 'background')
.attr('pointer-events', 'all')
.attr('fill', 'none')
.attr('height', size.y + 'px')
.attr('width', size.x + 'px')
var d = [5,6,7,8,9,10,11,12]
var x = d3.scale.ordinal()
.domain(d3.range(d.length))
.rangeRoundBands([0, size.x], .15)
var y = d3.scale.linear()
.domain([0,d3.max(d)])
.range([size.y, 0])
var xax = d3.svg.axis().scale(x)
.tickSize(-size.y).orient('bottom')
var yax = d3.svg.axis().scale(y)
.tickSize(-size.x).orient('left')
svg.append("g")
.attr("class", "y axis")
.call(yax)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + size.y+ ")")
.call(xax)
var svg1 = svg.append('svg')
.attr('height', size.y + 'px')
.attr('width', size.x + 'px')
svg1.append('g').attr('class', 'rects')
function update(){
var rects = d3.select('.rects').selectAll('rect')
.data(d)
rects.attr('x', function(d,i) { return x(i)})
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d)})
.attr('height', function(d) { return size.y - y(d)})
rects.enter().append('rect')
.attr('x', function(d,i) { return x(i) })
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d)})
.attr('height', function(d) { return size.y - y(d)})
.style('fill', 'orange')
svg.select('.y.axis')
.call(yax)
svg.select('.x.axis')
.call(xax)
svg.select('.background')
.call(zoom)
svg.select('.background')
.call(drag)
}
var zoom = d3.behavior.zoom()
.on("zoom", zoomed)
function zoomed() {
y.domain([0, d3.max(d)*1/d3.event.scale])
update();
}
var drag = d3.behavior.drag()
.on("drag", dragmove).on("dragstart", dragstart);
var moved = 0;//record the translate x moved by the g which contains the bars.
var dragStartX = 0;//record the point from where the drag started
var oldTranslateX = 0;
function dragstart(d){
dragStartX = d3.event.sourceEvent.clientX;
oldTranslateX = moved;//record the old translate
console.log(d3.event)
}
function dragmove(d) {
var x = d3.event.x;
var y = d3.event.y;
var dx = x-dragStartX
x = dx + oldTranslateX + 50; //add the old translate to the dx to get the resultant translate
moved = x; //record the translate x given
//move the bars via translate x
d3.select('.rects').attr("transform", "translate(" + x + "," + 0 + ")");
//move the x axis via translate x
d3.select('.x').attr("transform", "translate("+x +" ," + size.y+ ")")
}
update()
Here is the fiddle: http://jsfiddle.net/cyril123/o0qeom7n/3/

Resources