Related
I am trying to do the enter-update-exit pattern on this graph below (which was built with the tremendous help of some very kind ppl here at SO but I am now stuck again unfortunately. I cant make the pattern work but I am certain I pick up the correct object (named heatDotsGroup in the code below).
I can however check in Chrome's developer tools that this object contains the nodes (ellipses) but the pattern doesn't work, therefore clearly I am doing something wrong.
Any ideas please? Many thanks!
function heatmap(dataset) {
var svg = d3.select("#chart")
.select("svg")
var xLabels = [],
yLabels = [];
for (i = 0; i < dataset.length; i++) {
if (i==0){
xLabels.push(dataset[i].xLabel);
var j = 0;
while (dataset[j+1].xLabel == dataset[j].xLabel){
yLabels.push(dataset[j].yLabel);
j++;
}
yLabels.push(dataset[j].yLabel);
} else {
if (dataset[i-1].xLabel == dataset[i].xLabel){
//do nothing
} else {
xLabels.push(dataset[i].xLabel);
}
}
};
var margin = {top: 0, right: 25,
bottom: 60, left: 75};
var width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var dotSpacing = 0,
dotWidth = width/(2*(xLabels.length+1)),
dotHeight = height/(2*yLabels.length);
var daysRange = d3.extent(dataset, function (d) {return d.xKey}),
days = daysRange[1] - daysRange[0];
var hoursRange = d3.extent(dataset, function (d) {return d.yKey}),
hours = hoursRange[1] - hoursRange[0];
var tRange = d3.extent(dataset, function (d) {return d.val}),
tMin = tRange[0],
tMax = tRange[1];
var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
// the scale
var scale = {
x: d3.scaleLinear()
.range([-1, width]),
y: d3.scaleLinear()
.range([height, 0]),
};
var xBand = d3.scaleBand().domain(xLabels).range([0, width]),
yBand = d3.scaleBand().domain(yLabels).range([height, 0]);
var axis = {
x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
};
function updateScales(data){
scale.x.domain([0, d3.max(data, d => d.xKey)]),
scale.y.domain([ 0, d3.max(data, d => d.yKey)])
}
var colorScale = d3.scaleQuantile()
.domain([0, colors.length - 1, d3.max(dataset, function (d) {return d.val;})])
.range(colors);
var zoom = d3.zoom()
.scaleExtent([1, dotHeight])
.on("zoom", zoomed);
var tooltip = d3.select("body").append("div")
.attr("id", "tooltip")
.style("opacity", 0);
// SVG canvas
svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Clip path
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height+dotHeight);
// Heatmap dots
var heatDotsGroup = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("g");
//Create X axis
var renderXAxis = svg.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + scale.y(-0.5) + ")")
//.call(axis.x)
//Create Y axis
var renderYAxis = svg.append("g")
.attr("class", "y axis")
.call(axis.y);
function zoomed() {
d3.event.transform.y = 0;
d3.event.transform.x = Math.min(d3.event.transform.x, 5);
d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
// console.log(d3.event.transform)
// update: rescale x axis
renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
// Make sure that only the x axis is zoomed
heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
}
svg.call(renderPlot, dataset)
function renderPlot(selection, dataset){
//Do the axes
updateScales(dataset)
selection.select('.y.axis').call(axis.y)
selection.select('.x.axis')
.attr("transform", "translate(0," + scale.y(-0.5) + ")")
.call(axis.x)
// Do the chart
const update = heatDotsGroup.selectAll("ellipse")
.data(dataset);
update
.enter()
.append("ellipse")
.attr("cx", function (d) {return scale.x(d.xKey) - xBand.bandwidth();})
.attr("cy", function (d) {return scale.y(d.yKey) + yBand.bandwidth();})
.attr("rx", dotWidth)
.attr("ry", dotHeight)
.attr("fill", function (d) {
return colorScale(d.val);}
)
.merge(update).transition().duration(800);
update.exit().remove();
}
};
#clickMe{
height:50px;
width:150px;
background-color:lavender;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heatmap Chart</title>
<!-- Reference style.css -->
<!-- <link rel="stylesheet" type="text/css" href="style.css">-->
<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='heatmap_v4.js' type='text/javascript'></script>
</head>
<body>
<input id="clickMe" type="button" value="click me to push new data" onclick="run();" />
<div id='chart'>
<svg width="700" height="500">
<g class="focus">
<g class="xaxis"></g>
<g class="yaxis"></g>
</g>
</svg>
</div>
<script>
function run() {
var dataset = [];
for (let i = 1; i < 360; i++) { //360
for (j = 1; j < 7; j++) { //75
dataset.push({
xKey: i,
xLabel: "xMark " + i,
yKey: j,
yLabel: "yMark " + j,
val: Math.random() * 25,
})
}
};
heatmap(dataset)
}
$(document).ready(function() {});
</script>
</body>
</html>
The issue is that you are not using the same selection each time you run the enter/exit/update cycle. When the button is pushed you:
Generate new data
Run the heatmap function
The heatmap function selects the svg and appends a fresh g called heatDotsGroup
The update function is called and passed the newly created g as a selection
The enter cycle appends everything because the new g is empty.
As a result both the exit and udpate cycles are empty. Try:
console.log(update.size(),update.exit().size()) // *Without any merge*
You should see both are empty each update. This is because all elements are entered each time, which why each update increases the number of ellipses.
I've pulled out a bunch of variable declarations and append statements from the heatmap function, things that only need to be run once (I could go further, but I just did a minimum). I've also merged your update and enter selection prior to setting attributes (as we want to set the new attributes if we update).The below snippet should demonstrate this change.
In the snippet, on button push the following happens:
Generate new data
Run the heatmap function
The heatmap function selects existing selections and doesn't append anything new
The update function is called and passed the selection used by previous update/enter/exit cycles containing any existing nodes.
The update function enters/exits/updates elements as needed based on the existing nodes.
Here's a working version based on the above:
// Things to set/append once:
var svg = d3.select("#chart")
.select("svg")
var margin = {top: 0, right: 25,bottom: 60, left: 75};
var width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
svg = 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 clip = svg.append("clipPath")
.attr("id", "clip")
.append("rect")
var heatDotsGroup = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("g");
var xAxis = svg.append("g").attr("class", "x axis");
var yAxis = svg.append("g").attr("class", "y axis")
function heatmap(dataset) {
var xLabels = [],
yLabels = [];
for (i = 0; i < dataset.length; i++) {
if (i==0){
xLabels.push(dataset[i].xLabel);
var j = 0;
while (dataset[j+1].xLabel == dataset[j].xLabel){
yLabels.push(dataset[j].yLabel);
j++;
}
yLabels.push(dataset[j].yLabel);
} else {
if (dataset[i-1].xLabel == dataset[i].xLabel){
//do nothing
} else {
xLabels.push(dataset[i].xLabel);
}
}
};
var dotSpacing = 0,
dotWidth = width/(2*(xLabels.length+1)),
dotHeight = height/(2*yLabels.length);
var daysRange = d3.extent(dataset, function (d) {return d.xKey}),
days = daysRange[1] - daysRange[0];
var hoursRange = d3.extent(dataset, function (d) {return d.yKey}),
hours = hoursRange[1] - hoursRange[0];
var tRange = d3.extent(dataset, function (d) {return d.val}),
tMin = tRange[0],
tMax = tRange[1];
var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
// the scale
var scale = {
x: d3.scaleLinear()
.range([-1, width]),
y: d3.scaleLinear()
.range([height, 0]),
};
var xBand = d3.scaleBand().domain(xLabels).range([0, width]),
yBand = d3.scaleBand().domain(yLabels).range([height, 0]);
var axis = {
x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
};
function updateScales(data){
scale.x.domain([0, d3.max(data, d => d.xKey)]),
scale.y.domain([ 0, d3.max(data, d => d.yKey)])
}
var colorScale = d3.scaleQuantile()
.domain([0, colors.length - 1, d3.max(dataset, function (d) {return d.val;})])
.range(colors);
var zoom = d3.zoom()
.scaleExtent([1, dotHeight])
.on("zoom", zoomed);
var tooltip = d3.select("body").append("div")
.attr("id", "tooltip")
.style("opacity", 0);
// SVG canvas
svg.call(zoom);
// Clip path
clip.attr("width", width)
.attr("height", height+dotHeight);
//Create X axis
var renderXAxis = xAxis
//.attr("transform", "translate(0," + scale.y(-0.5) + ")")
//.call(axis.x)
//Create Y axis
var renderYAxis = yAxis.call(axis.y);
function zoomed() {
d3.event.transform.y = 0;
d3.event.transform.x = Math.min(d3.event.transform.x, 5);
d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
// console.log(d3.event.transform)
// update: rescale x axis
renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
// Make sure that only the x axis is zoomed
heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
}
svg.call(renderPlot, dataset)
function renderPlot(selection, dataset){
//Do the axes
updateScales(dataset)
selection.select('.y.axis').call(axis.y)
selection.select('.x.axis')
.attr("transform", "translate(0," + scale.y(-0.5) + ")")
.call(axis.x)
// Do the chart
const update = heatDotsGroup.selectAll("ellipse")
.data(dataset);
update
.enter()
.append("ellipse")
.merge(update)
.attr("cx", function (d) {return scale.x(d.xKey) - xBand.bandwidth();})
.attr("cy", function (d) {return scale.y(d.yKey) + yBand.bandwidth();})
.attr("rx", dotWidth)
.attr("ry", dotHeight)
.attr("fill", function (d) {
return colorScale(d.val);}
)
update.exit().remove();
}
};
#clickMe{
height:50px;
width:150px;
background-color:lavender;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heatmap Chart</title>
<!-- Reference style.css -->
<!-- <link rel="stylesheet" type="text/css" href="style.css">-->
<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='heatmap_v4.js' type='text/javascript'></script>
</head>
<body>
<input id="clickMe" type="button" value="click me to push new data" onclick="run();" />
<div id='chart'>
<svg width="700" height="500">
<g class="focus">
<g class="xaxis"></g>
<g class="yaxis"></g>
</g>
</svg>
</div>
<script>
function run() {
var dataset = [];
for (let i = 1; i < 360; i++) { //360
for (j = 1; j < 7; j++) { //75
dataset.push({
xKey: i,
xLabel: "xMark " + i,
yKey: j,
yLabel: "yMark " + j,
val: Math.random() * 25,
})
}
};
heatmap(dataset)
}
$(document).ready(function() {});
</script>
</body>
</html>
The exit selection here is still empty as the size of the data array is fixed. D3 assumes the new data replaces the old, but it can't know that the new data should be represented as new elements, unless of course we specify a key function as noted in a now deleted comment. This may or may not be the desired functionality that you want.
I have a slightly different approach than Andrew.
A bunch of global variables will get messy when you have multiple charts.
When you click the button:
call the renderPlot(dataset)
check if we have a #clip element in the svg
if not: call heatmap(dataset)
Construct all the static stuff and append to the svg.
append a datum object to the svg with the variables needed for the update
fetch the datum from the svg
update the content of the svg using the datum object
function heatmap(dataset) {
var svg = d3.select("#chart")
.select("svg");
var xLabels = [],
yLabels = [];
for (i = 0; i < dataset.length; i++) {
if (i==0){
xLabels.push(dataset[i].xLabel);
var j = 0;
while (dataset[j+1].xLabel == dataset[j].xLabel){
yLabels.push(dataset[j].yLabel);
j++;
}
yLabels.push(dataset[j].yLabel);
} else {
if (dataset[i-1].xLabel == dataset[i].xLabel){
//do nothing
} else {
xLabels.push(dataset[i].xLabel);
}
}
};
var margin = {top: 0, right: 25,
bottom: 60, left: 75};
var width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var dotSpacing = 0,
dotWidth = width/(2*(xLabels.length+1)),
dotHeight = height/(2*yLabels.length);
var daysRange = d3.extent(dataset, function (d) {return d.xKey}),
days = daysRange[1] - daysRange[0];
var hoursRange = d3.extent(dataset, function (d) {return d.yKey}),
hours = hoursRange[1] - hoursRange[0];
var tRange = d3.extent(dataset, function (d) {return d.val}),
tMin = tRange[0],
tMax = tRange[1];
var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
// the scale
var scale = {
x: d3.scaleLinear()
.range([-1, width]),
y: d3.scaleLinear()
.range([height, 0]),
};
var xBand = d3.scaleBand().domain(xLabels).range([0, width]),
yBand = d3.scaleBand().domain(yLabels).range([height, 0]);
var axis = {
x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
};
var colorScale = d3.scaleQuantile()
.domain([0, colors.length - 1, d3.max(dataset, function (d) {return d.val;})])
.range(colors);
var zoom = d3.zoom()
.scaleExtent([1, dotHeight])
.on("zoom", zoomed);
var tooltip = d3.select("body").append("div")
.attr("id", "tooltip")
.style("opacity", 0);
// SVG canvas
svg .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Clip path
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height+dotHeight);
// Heatmap dots
var heatDotsGroup = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("g");
//Create X axis
var renderXAxis = svg.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + scale.y(-0.5) + ")")
//.call(axis.x)
//Create Y axis
var renderYAxis = svg.append("g")
.attr("class", "y axis")
.call(axis.y);
function zoomed() {
d3.event.transform.y = 0;
d3.event.transform.x = Math.min(d3.event.transform.x, 5);
d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
// console.log(d3.event.transform)
// update: rescale x axis
renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
// Make sure that only the x axis is zoomed
heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
}
var chartData = {};
chartData.scale = scale;
chartData.axis = axis;
chartData.xBand = xBand;
chartData.yBand = yBand;
chartData.colorScale = colorScale;
chartData.heatDotsGroup = heatDotsGroup;
chartData.dotWidth = dotWidth;
chartData.dotHeight = dotHeight;
svg.datum(chartData);
//svg.call(renderPlot, dataset)
}
function updateScales(data, scale){
scale.x.domain([0, d3.max(data, d => d.xKey)]),
scale.y.domain([0, d3.max(data, d => d.yKey)])
}
function renderPlot(dataset){
var svg = d3.select("#chart")
.select("svg");
if (svg.select("#clip").empty()) { heatmap(dataset); }
chartData = svg.datum();
//Do the axes
updateScales(dataset, chartData.scale);
svg.select('.y.axis').call(chartData.axis.y)
svg.select('.x.axis')
.attr("transform", "translate(0," + chartData.scale.y(-0.5) + ")")
.call(chartData.axis.x)
// Do the chart
const update = chartData.heatDotsGroup.selectAll("ellipse")
.data(dataset);
update
.enter()
.append("ellipse")
.attr("rx", chartData.dotWidth)
.attr("ry", chartData.dotHeight)
.merge(update)
.transition().duration(800)
.attr("cx", function (d) {return chartData.scale.x(d.xKey) - chartData.xBand.bandwidth();})
.attr("cy", function (d) {return chartData.scale.y(d.yKey) + chartData.yBand.bandwidth();})
.attr("fill", function (d) { return chartData.colorScale(d.val);} );
update.exit().remove();
}
#clickMe{
height:50px;
width:150px;
background-color:lavender;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heatmap Chart</title>
<!-- Reference style.css -->
<!-- <link rel="stylesheet" type="text/css" href="style.css">-->
<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='heatmap_v4.js' type='text/javascript'></script>
</head>
<body>
<input id="clickMe" type="button" value="click me to push new data" onclick="run();" />
<div id='chart'>
<svg width="700" height="500">
<g class="focus">
<g class="xaxis"></g>
<g class="yaxis"></g>
</g>
</svg>
</div>
<script>
function run() {
var dataset = [];
for (let i = 1; i < 360; i++) { //360
for (j = 1; j < 7; j++) { //75
dataset.push({
xKey: i,
xLabel: "xMark " + i,
yKey: j,
yLabel: "yMark " + j,
val: Math.random() * 25,
})
}
};
renderPlot(dataset)
}
$(document).ready(function() {});
</script>
</body>
</html>
So, implementing a brush behaviour inspired from M Bostock example I came across something I did not quite understand.
If set a callback for the 'end' event of the brush, this gets called as expected whenever you're interacting directly with the brush.
But whenever I recenter the brush, it seems that the end event is fired twice.
Why is that the case? Or, is it something I'm doing wrong here?
<!DOCTYPE html>
<style>
.selected {
fill: red;
stroke: brown;
}
</style>
<svg width="960" height="150"></svg>
<div>Event fired <span id="test"></span></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var fired=0;
var randomX = d3.randomUniform(0, 10),
randomY = d3.randomNormal(0.5, 0.12),
data = d3.range(800).map(function() { return [randomX(), randomY()]; });
var svg = d3.select("svg"),
margin = {top: 10, right: 50, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([0, 10])
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var brush = d3.brushX()
.extent([[0, 0], [width, height]])
.on("start brush", brushed)
.on("end", brushend);
var dot = g.append("g")
.attr("fill-opacity", 0.2)
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
.attr("r", 3.5);
g.append("g")
.call(brush)
.call(brush.move, [3, 5].map(x))
.selectAll(".overlay")
.each(function(d) { d.type = "selection"; }) // Treat overlay interaction as move.
.on("mousedown touchstart", brushcentered); // Recenter before brushing.
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
function brushcentered() {
var dx = x(1) - x(0), // Use a fixed width when recentering.
cx = d3.mouse(this)[0],
x0 = cx - dx / 2,
x1 = cx + dx / 2;
d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]);
}
function brushed() {
var extent = d3.event.selection.map(x.invert, x);
dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; });
}
function brushend() {
document.getElementById('test').innerHTML = ++fired;
// console.log('end fired - ' + (++fired));
}
</script>
Whenever you want to stop an event from triggering multiple layers of actions, you can use:
d3.event.stopPropagation();
Here you can include it at the end of the brushcentered function:
function brushcentered() {
var dx = x(1) - x(0), // Use a fixed width when recentering.
cx = d3.mouse(this)[0],
x0 = cx - dx / 2,
x1 = cx + dx / 2;
d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]);
d3.event.stopPropagation();
}
And the demo:
<style>
.selected {
fill: red;
stroke: brown;
}
</style>
<svg width="960" height="150"></svg>
<div>Event fired <span id="test"></span></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var fired=0;
var randomX = d3.randomUniform(0, 10),
randomY = d3.randomNormal(0.5, 0.12),
data = d3.range(800).map(function() { return [randomX(), randomY()]; });
var svg = d3.select("svg"),
margin = {top: 10, right: 50, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([0, 10])
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var brush = d3.brushX()
.extent([[0, 0], [width, height]])
.on("start brush", brushed)
.on("end", brushend);
var dot = g.append("g")
.attr("fill-opacity", 0.2)
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
.attr("r", 3.5);
g.append("g")
.call(brush)
.call(brush.move, [3, 5].map(x))
.selectAll(".overlay")
.each(function(d) { d.type = "selection"; }) // Treat overlay interaction as move.
.on("mousedown touchstart", brushcentered); // Recenter before brushing.
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
function brushcentered() {
var dx = x(1) - x(0), // Use a fixed width when recentering.
cx = d3.mouse(this)[0],
x0 = cx - dx / 2,
x1 = cx + dx / 2;
d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]);
d3.event.stopPropagation();
}
function brushed() {
var extent = d3.event.selection.map(x.invert, x);
dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; });
}
function brushend() {
document.getElementById('test').innerHTML = ++fired;
}
</script>
-UPDATE-
For the purpose of this snippet, I can use a boolean flag to stop the first event and let the second go through. This means that I am still able to drag the brush after recentering, all in one go.
<!DOCTYPE html>
<style>
.selected {
fill: red;
stroke: brown;
}
</style>
<svg width="960" height="150"></svg>
<div>Event fired <span id="test"></span></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var fired=0;
var justcentered = false;
var randomX = d3.randomUniform(0, 10),
randomY = d3.randomNormal(0.5, 0.12),
data = d3.range(800).map(function() {
return [randomX(), randomY()];
});
var svg = d3.select("svg"),
margin = { top: 10, right: 50, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([0, 10])
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var brush = d3.brushX()
.extent([[0, 0], [width, height]])
.on("start brush", brushed)
.on("end", brushend);
var dot = g.append("g")
.attr("fill-opacity", 0.2)
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("transform", function(d) {
return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
})
.attr("r", 3.5);
g.append("g")
.call(brush)
.call(brush.move, [3, 5].map(x))
.selectAll(".overlay")
.each(function(d) { d.type = "selection"; }) // Treat overlay interaction as move.
.on("mousedown touchstart", brushcentered); // Recenter before brushing.
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
function brushcentered() {
var dx = x(1) - x(0), // Use a fixed width when recentering.
cx = d3.mouse(this)[0],
x0 = cx - dx / 2,
x1 = cx + dx / 2;
justcentered = true;
d3.select(this.parentNode)
.call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]);
}
function brushed() {
var extent = d3.event.selection.map(x.invert, x);
dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; });
}
function brushend() {
if(justcentered) {
justcentered = false;
return;
}
document.getElementById('test').innerHTML = ++fired;
}
</script>
I'm trying to draw a brush on my histogram. The brush controls only appear after a click event (not on the initial page load). Obviously, not the desired behavior.
How do I instantiate the chart AND the brushes on the initial page load before the first click event?
// TEST Data //
var caldata = [
{"cal_start_yr": "1945"}, {"cal_start_yr": "1948"},
{"cal_start_yr": "1945"}, {"cal_start_yr": "1950"},
{"cal_start_yr": "1945"}, {"cal_start_yr": "1941"},
{"cal_start_yr": "1944"}, {"cal_start_yr": "1949"}
];
// CROSSFILTER Aggregations //
var cals = crossfilter(caldata);
var total = cals.groupAll().reduceCount().value();
var year = cals.dimension(function(d) {
return d.cal_start_yr;
});
var countYear = year.group().reduceCount();
var yearCount = countYear.all();
// Some helper AGGREGATION Values
var keys = countYear.all().map(function(d) {return d.value;}),
min = d3.min(countYear.all(), function(d) {return d.key;}),
max = d3.max(countYear.all(), function(d) {return d.key;}),
range = max - min;
// Histogram dimensions
var margin = {top: 10, right: 20, bottom: 10,left: 10 },
height = 250 - margin.top - margin.bottom,
width = 450 - margin.left - margin.right,
barPadding = 5;
// Histogram SCALES
var xScale = d3.scale.linear()
.domain([min, max])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, d3.max(countYear.all(), function(d) {return d.value;})])
.range([height / 2, 0]);
// D3 Tool Tip
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {return d.key});
// CANVAS setup //
var histogram1 = d3.select("#histogram1").append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g");
// Initiate Tooltip //
histogram1.call(tip);
// DRAW Histogram //
histogram1.selectAll("rect")
.data(yearCount)
.enter().append("rect")
.attr("x", function(d) {
return xScale(d.key) + 0.5 * (width / range)
})
.attr("width", width / range)
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return (height / 2 - yScale(d.value));
})
.attr("fill", "green")
.attr("fill-opacity", .25)
.attr("stroke", "white")
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
// X AXIS //
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5)
.orient("bottom")
.tickFormat(d3.format("d"));
histogram1.append("g")
.attr("class", "axis")
.call(xAxis)
.attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
var brush = d3.svg.brush()
.x(xScale)
.extent([xScale(+1945), xScale(+1946)])
.on("brush", function(d) {console.log(d);});
var brushg = histogram1.append("g")
.attr("class", "brush")
.call(brush)
brushg.selectAll("rect")
.attr("height", height / 2);
brushg.selectAll(".resize")
.append("path")
.attr("d", resizePath);
function resizePath(d) {
// Style the brush resize handles. No idea what these vals do...
var e = +(d == "e"),
x = e ? 1 : -1,
y = height / 4; // Relative positon if handles
return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8);
}
/*** d3-tip styles */
.as-console-wrapper { max-height: 20% !important;}
.d3-tip {
line-height: 1.5;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 0px;
text-align: center;
}
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
.d3-tip.n:after {
top: 100%;
left: 0;
margin: -1px 0 0;
}
/*** D3 brush */
.brush .extent {
stroke: #222;
fill-opacity: .125;
shape-rendering: crispEdges;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<div id="histogram1"></div>
The brush's extent is set to a value from the scale's domain, not its range! From the docs:
The scale is typically defined as a quantitative scale, in which case the extent is in data space from the scale's domain
To set the initial extent you have to use
.extent([1945, 1946])
instead of
.extent([xScale(+1945), xScale(+1946)])
For a working demo have a look at the updated snippet:
// TEST Data //
var caldata = [
{"cal_start_yr": "1945"}, {"cal_start_yr": "1948"},
{"cal_start_yr": "1945"}, {"cal_start_yr": "1950"},
{"cal_start_yr": "1945"}, {"cal_start_yr": "1941"},
{"cal_start_yr": "1944"}, {"cal_start_yr": "1949"}
];
// CROSSFILTER Aggregations //
var cals = crossfilter(caldata);
var total = cals.groupAll().reduceCount().value();
var year = cals.dimension(function(d) {
return d.cal_start_yr;
});
var countYear = year.group().reduceCount();
var yearCount = countYear.all();
// Some helper AGGREGATION Values
var keys = countYear.all().map(function(d) {return d.value;}),
min = d3.min(countYear.all(), function(d) {return d.key;}),
max = d3.max(countYear.all(), function(d) {return d.key;}),
range = max - min;
// Histogram dimensions
var margin = {top: 10, right: 20, bottom: 10,left: 10 },
height = 250 - margin.top - margin.bottom,
width = 450 - margin.left - margin.right,
barPadding = 5;
// Histogram SCALES
var xScale = d3.scale.linear()
.domain([min, max])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, d3.max(countYear.all(), function(d) {return d.value;})])
.range([height / 2, 0]);
// D3 Tool Tip
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {return d.key});
// CANVAS setup //
var histogram1 = d3.select("#histogram1").append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g");
// Initiate Tooltip //
histogram1.call(tip);
// DRAW Histogram //
histogram1.selectAll("rect")
.data(yearCount)
.enter().append("rect")
.attr("x", function(d) {
return xScale(d.key) + 0.5 * (width / range)
})
.attr("width", width / range)
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return (height / 2 - yScale(d.value));
})
.attr("fill", "green")
.attr("fill-opacity", .25)
.attr("stroke", "white")
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
// X AXIS //
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5)
.orient("bottom")
.tickFormat(d3.format("d"));
histogram1.append("g")
.attr("class", "axis")
.call(xAxis)
.attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
var brush = d3.svg.brush()
.x(xScale)
.extent([1945, 1946])
.on("brush", function(d) {console.log(brush.extent());});
var brushg = histogram1.append("g")
.attr("class", "brush")
.call(brush)
brushg.selectAll("rect")
.attr("height", height / 2);
brushg.selectAll(".resize")
.append("path")
.attr("d", resizePath);
function resizePath(d) {
// Style the brush resize handles. No idea what these vals do...
var e = +(d == "e"),
x = e ? 1 : -1,
y = height / 4; // Relative positon if handles
return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8);
}
/*** d3-tip styles */
.d3-tip {
line-height: 1.5;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 0px;
text-align: center;
}
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
.d3-tip.n:after {
top: 100%;
left: 0;
margin: -1px 0 0;
}
/*** D3 brush */
.brush .extent {
stroke: #222;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.as-console-wrapper { max-height: 30% !important;}
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<div id="histogram1"></div>
I have some code which plots a certain mathematical function and enables the user to change certain specific parameters of the function on the fly enabling the user to see the change of it.
I have two questions with which I need some help.
i) I am using the jquery UI library which provides a slider. I use this slider to enable the user to change a specific parameter in a certain range. Normally there are no constraints on the parameter. However, in this case I need that the following equality holds min <= mode <= max. Currently I have solved this with some code in the slide event of the slider. The code basically checks the equality and if it is violated it sets the parameter to either its minimum or maximum possible value.
Visually, however, it is possible to slide further. However, after I the slider is let loose by the user, the change event has been called and I change the parameter to either its minimum or maximum possible value. Is it possible to make sure that also visually the slider is does not violates the constraint?
ii) When I load the page there is no plot visible yet on the page. That is because I seem to be unable to call the function redraw() when the page is loading, see the code at the bottom. Why is redraw() not being called?
Snippet, see below or http://jsfiddle.net/qraLt1p3/11/
<!DOCTYPE html>
<html lang="en">
<head>
<title>MPERT</title>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
rect {
fill: transparent;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
clip-path: url(#clip);
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
#slider-pertmin, #slider-pertmode, #slider-pertmax {
float: right;
width: 120px;
margin: 7px;
}
.ui-slider-horizontal {
height: 8px;
width: 200px;
}
.ui-slider .ui-slider-handle {
height: 15px;
width: 5px;
padding-left: 5px;
}
#plot {
background-color:#f9f9f9;
border:solid 1px #ddd;
padding:10px;
width:250px;
}
#plotOptions {
background-color:#f9f9f9;
border:solid 1px #ddd;
padding:10px;
}
.block label {
display: inline-block;
width: 60px;
text-align: right;
}
</style>
<script type="text/javascript">
// Log-gamma function
gammaln = function gammaln(x)
{
var cof = [ 76.18009172947146, -86.50532032941677, 24.01409824083091,
-1.231739572450155, 0.1208650973866179e-2, -0.5395239384953e-5];
var j = 0;
var ser = 1.000000000190015;
var xx, y, tmp;
tmp = (y = xx = x) + 5.5;
tmp -= (xx + 0.5) * Math.log(tmp);
for (; j < 6; j++)
ser += cof[j] / ++y;
return Math.log(2.5066282746310005 * ser / xx) - tmp;
};
// Gamma function
gammafn = function gammafn(x)
{
var p = [ -1.716185138865495, 24.76565080557592, -379.80425647094563,
629.3311553128184, 866.9662027904133, -31451.272968848367,
-36144.413418691176, 66456.14382024054];
var q = [ -30.8402300119739, 315.35062697960416, -1015.1563674902192,
-3107.771671572311, 22538.118420980151, 4755.8462775278811,
-134659.9598649693, -115132.2596755535];
var fact = false,
n = 0,
xden = 0,
xnum = 0,
y = x,
i,
z,
yi,
res,
sum,
ysq;
if (y <= 0) {
res = y % 1 + 3.6e-16;
if (res) {
fact = (!(y & 1) ? 1 : -1) * Math.PI / Math.sin(Math.PI * res);
y = 1 - y;
} else
return Infinity;
}
yi = y;
if (y < 1)
z = y++;
else
z = (y -= n = (y | 0) - 1) - 1;
for (i = 0; i < 8; ++i) {
xnum = (xnum + p[i]) * z;
xden = xden * z + q[i];
}
res = xnum / xden + 1;
if (yi < y)
res /= yi;
else if (yi > y) {
for (i = 0; i < n; ++i) {
res *= y;
y++;
}
}
if (fact)
res = fact / res;
return res;
};
// Beta function
betafn = function betafn(x,y)
{
// ensure arguments are positive
if (x <= 0 || y <= 0)
return undefined;
// make sure x + y doesn't exceed the upper limit of usable values
return (x + y > 170)
? Math.exp(betaln(x, y))
: gammafn(x) * gammafn(y) / gammafn(x + y);
};
// Natural logarithm of Beta function
betaln = function betaln(x, y)
{
return gammaln(x) + gammaln(y) - gammaln(x + y);
};
$(function() {
$("#slider-pertmin").slider({
range: "min",
value: 1,
min: 1,
max: 20,
step: 0.1,
slide: function(event,ui) {
if (ui.value > $("#slider-pertmode").slider("value")) {
$("#pertmin").val($("#slider-pertmode").slider("value") - 0.1);
$("#slider-pertmin").slider("value",$("#slider-pertmode").slider("value") - 0.1)
} else
$("#pertmin").val(ui.value);
redraw();
},
change: function(event,ui) {
$("#slider-pertmin").slider("value",$("#pertmin").val());
}
});
$("#slider-pertmode").slider({
range: "min",
value: 3,
min: 1,
max: 20,
step: 0.1,
slide: function(event,ui) {
if (ui.value < $("#slider-pertmin").slider("value")) {
$("#pertmode").val($("#slider-pertmin").slider("value") + 0.1);
$("#slider-pertmode").slider("value",$("#slider-pertmin").slider("value") + 0.1);
} else if (ui.value > $("#slider-pertmax").slider("value")) {
$("#pertmode").val($("#slider-pertmax").slider("value") - 0.1);
$("#slider-pertmode").slider("value",$("#slider-pertmax").slider("value") - 0.1);
} else
$("#pertmode").val(ui.value);
redraw();
},
change: function(event,ui) {
$("#slider-pertmode").slider("value",$("#pertmode").val());
}
});
$("#slider-pertmax").slider({
range: "min",
value: 6,
min: 1,
max: 20,
step: 0.1,
slide: function(event,ui) {
if (ui.value < $("#slider-pertmode").slider("value")) {
$("#pertmax").val($("#slider-pertmode").slider("value") + 0.1);
$("#slider-pertmax").slider("value",$("#slider-pertmode").slider("value") + 0.1);
} else
$("#pertmax").val(ui.value);
redraw();
},
change: function(event,ui) {
$("#slider-pertmax").slider("value",$("#pertmax").val());
}
});
$("#pertmin").val($("#slider-pertmin").slider("value"));
$("#pertmode").val($("#slider-pertmode").slider("value"));
$("#pertmax").val($("#slider-pertmax").slider("value"));
});
</script>
</head>
<body>
<div id="plot"></div>
<div id="plotOptions" class="ui-widget" style="width:250px">
<div class="block">
<label for="pertmin">min:</label> <input type="value" id="pertmin" style="border:none; background: transparent; width:40px;" />
<div class="ui-slider" id="slider-pertmin" />
</div>
<div class="block">
<label for="pertmode">mode:</label> <input type="value" id="pertmode" style="border:none; background: transparent; width:40px;" />
<div class="ui-slider" id="slider-pertmode" />
</div>
<div class="block">
<label for="pertmax">max:</label> <input type="value" id="pertmax" style="border:none; background: transparent; width:40px;" />
<div class="ui-slider" id="slider-pertmax" />
</div>
</div>
<script type="text/javascript">
var pert = {
min: 2,
mode: 4,
max: 9
};
pert.mu = (pert.min + 4*pert.mode + pert.max)/6;
pert.a1 = 6*(pert.mu - pert.min)/(pert.max - pert.min);
pert.a2 = 6*(pert.max - pert.mu)/(pert.max - pert.min);
pert.beta = betafn(pert.a1,pert.a2);
var data = [];
for (var k = pert.min; k < pert.max; k += 0.1) {
data.push({
x: k,
y: (1/pert.beta)*(Math.pow(k - pert.min,pert.a1 - 1) *
Math.pow(pert.max - k,pert.a2 - 1)) /
Math.pow(pert.max - pert.min,pert.a1 + pert.a2 - 1)
});
}
var margin = {
top: 20,
right: 20,
bottom: 35,
left: 50
},
width = 250 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([pert.min, pert.max])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var xAxis1 = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.innerTickSize(-6)
.outerTickSize(0)
.tickPadding(7);
var yAxis1 = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.innerTickSize(-6)
.outerTickSize(0)
.tickPadding(7);
var xAxis2 = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(5)
.innerTickSize(-6)
.tickPadding(-20)
.outerTickSize(0)
.tickFormat("");
var yAxis2 = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.innerTickSize(6)
.tickPadding(-20)
.outerTickSize(0)
.tickFormat("");
var xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height, -height, 0)
.tickFormat("");
var yGrid = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, -width, 0)
.tickFormat("");
var line = d3.svg.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
})
.interpolate("linear");
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 1])
.on("zoom",redraw);
var svg = d3.select("#plot").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);
// Add x grid
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(xGrid);
// Add y grid
svg.append("g")
.attr("class", "y grid")
.call(yGrid);
svg.append("g")
.attr("class", "x1 axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis1);
svg.append("g")
.attr("class", "y1 axis")
.call(yAxis1);
/* append additional X axis */
svg.append("g")
.attr("class", "x2 axis")
.attr("transform", "translate(" + [0, 0] + ")")
.call(xAxis2);
/* append additional y axis */
svg.append("g")
.attr("class", "y2 axis")
.attr("transform", "translate(" + [width, 0] + ")")
.call(yAxis2);
// Add x axis label
svg.append("text")
.attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")")
.style("font-size","15")
.style("text-anchor", "middle")
.text("x axis");
// Add y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y",0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("font-size","15")
.style("text-anchor", "middle")
.text("y axis");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("path")
.attr("class", "line")
function redraw() {
pert.min = $("#slider-pertmin").slider("value");
pert.mode = $("#slider-pertmode").slider("value");
pert.max = $("#slider-pertmax").slider("value");
pert.mu = (pert.min + 4*pert.mode + pert.max)/6;
pert.a1 = 6*(pert.mu - pert.min)/(pert.max - pert.min);
pert.a2 = 6*(pert.max - pert.mu)/(pert.max - pert.min);
pert.beta = betafn(pert.a1,pert.a2);
x.domain([pert.min, pert.max]);
svg.select(".x1.axis").call(xAxis1);
svg.select(".y1.axis").call(yAxis1);
svg.select(".x2.axis").call(xAxis2);
svg.select(".y2.axis").call(yAxis2);
svg.select(".x.grid").call(xGrid);
svg.select(".y.grid").call(yGrid);
var data = [];
for (var k = pert.min; k < pert.max; k += 0.1) {
data.push({
x: k,
y: (1/pert.beta)*(Math.pow(k - pert.min,pert.a1 - 1) *
Math.pow(pert.max - k,pert.a2 - 1)) /
Math.pow(pert.max - pert.min,pert.a1 + pert.a2 - 1)
});
}
d3.select(".line").attr("d",line(data));
}
redraw();
</script>
</body>
</html>
1.) On your UI question, I would use a range slider to represent my min/max. I'd then get a bit fancy and update the min/max (and width) of my mode slider to force it always between the min/max.
2.) You are calling your initial redraw before the sliders have been initialized. This is because slider initialization is done inside the document.ready event while your initial redraw is not. A simple fix is:
$(function() {
redraw();
});
To expand on my answer a bit, here's a rough example of how I would implement your first question. Note, I swapped out the jquery slider with a d3 one based on this example. I always look for a d3 based answer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MPERT</title>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
rect {
fill: transparent;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
clip-path: url(#clip);
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
circle {
-webkit-transition: fill-opacity 250ms linear;
}
.selecting circle {
fill-opacity: .2;
}
.selecting circle.selected {
stroke: #f00;
}
.resize path {
fill: #666;
fill-opacity: .8;
stroke: #000;
stroke-width: 1.5px;
}
.brush .extent {
fill-opacity: .125;
shape-rendering: crispEdges;
}
#plot {
background-color: #f9f9f9;
border: solid 1px #ddd;
padding: 10px;
width: 250px;
}
#plotOptions {
background-color: #f9f9f9;
border: solid 1px #ddd;
padding: 10px;
}
.block label {
display: inline-block;
width: 60px;
text-align: right;
}
</style>
<script type="text/javascript">
// Log-gamma function
gammaln = function gammaln(x) {
var cof = [76.18009172947146, -86.50532032941677, 24.01409824083091, -1.231739572450155, 0.1208650973866179e-2, -0.5395239384953e-5];
var j = 0;
var ser = 1.000000000190015;
var xx, y, tmp;
tmp = (y = xx = x) + 5.5;
tmp -= (xx + 0.5) * Math.log(tmp);
for (; j < 6; j++)
ser += cof[j] / ++y;
return Math.log(2.5066282746310005 * ser / xx) - tmp;
};
// Gamma function
gammafn = function gammafn(x) {
var p = [-1.716185138865495, 24.76565080557592, -379.80425647094563,
629.3311553128184, 866.9662027904133, -31451.272968848367, -36144.413418691176, 66456.14382024054
];
var q = [-30.8402300119739, 315.35062697960416, -1015.1563674902192, -3107.771671572311, 22538.118420980151, 4755.8462775278811, -134659.9598649693, -115132.2596755535];
var fact = false,
n = 0,
xden = 0,
xnum = 0,
y = x,
i,
z,
yi,
res,
sum,
ysq;
if (y <= 0) {
res = y % 1 + 3.6e-16;
if (res) {
fact = (!(y & 1) ? 1 : -1) * Math.PI / Math.sin(Math.PI * res);
y = 1 - y;
} else
return Infinity;
}
yi = y;
if (y < 1)
z = y++;
else
z = (y -= n = (y | 0) - 1) - 1;
for (i = 0; i < 8; ++i) {
xnum = (xnum + p[i]) * z;
xden = xden * z + q[i];
}
res = xnum / xden + 1;
if (yi < y)
res /= yi;
else if (yi > y) {
for (i = 0; i < n; ++i) {
res *= y;
y++;
}
}
if (fact)
res = fact / res;
return res;
};
// Beta function
betafn = function betafn(x, y) {
// ensure arguments are positive
if (x <= 0 || y <= 0)
return undefined;
// make sure x + y doesn't exceed the upper limit of usable values
return (x + y > 170) ? Math.exp(betaln(x, y)) : gammafn(x) * gammafn(y) / gammafn(x + y);
};
// Natural logarithm of Beta function
betaln = function betaln(x, y) {
return gammaln(x) + gammaln(y) - gammaln(x + y);
};
</script>
</head>
<body>
<div id="plot"></div>
<div id="plotOptions" class="ui-widget" style="width:250px">
</div>
<script>
var margin = {top: 5, right: 20, bottom: 5, left: 20},
width = 250 - margin.left - margin.right,
height = 50 - margin.top - margin.bottom
min = 0, max = 20;
var brushX = d3.scale.linear()
.range([0, width])
.domain([min, max]);
var brush = d3.svg.brush()
.x(brushX)
.extent([0, 20])
.on("brush", brushmove);
var arc = d3.svg.arc()
.outerRadius(height / 3)
.startAngle(0)
.endAngle(function(d, i) { return i ? -Math.PI : Math.PI; });
var svg = d3.select("#plotOptions").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/2 + ")")
.call(d3.svg.axis().scale(brushX).orient("bottom"));
var brushg = svg.append("g")
.attr("class", "brush")
.call(brush);
brushg.selectAll(".resize").append("path")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("d", arc);
brushg.selectAll("rect")
.attr("height", height);
var mode = 10;
var modeRect = svg.append("rect")
.attr("height", height)
.attr("width", 10)
.attr("y", 0)
.attr("x", brushX(mode) - 5)
.style("fill", "steelblue")
.style("opacity", 0.5);
var drag = d3.behavior.drag()
.on("drag", modeDrag);
modeRect.call(drag);
function modeDrag(modeX){
var xPos = d3.mouse(this)[0],
tmp = brushX.invert(xPos);
if (tmp > min && tmp < max){
mode = tmp;
modeRect
.attr('x', xPos);
redraw();
}
}
function brushmove() {
console.log(d3.event)
var extent = brush.extent();
min = extent[0];
max = extent[1];
if (min >= mode){
mode = min;
modeRect.attr('x', brushX(mode) - 5);
} else if (max <= mode){
mode = max;
modeRect.attr('x', brushX(mode) - 5);
}
redraw();
}
</script>
<script type="text/javascript">
var pert = {
min: 2,
mode: 4,
max: 9
};
pert.mu = (pert.min + 4 * pert.mode + pert.max) / 6;
pert.a1 = 6 * (pert.mu - pert.min) / (pert.max - pert.min);
pert.a2 = 6 * (pert.max - pert.mu) / (pert.max - pert.min);
pert.beta = betafn(pert.a1, pert.a2);
var data = [];
for (var k = pert.min; k < pert.max; k += 0.1) {
data.push({
x: k,
y: (1 / pert.beta) * (Math.pow(k - pert.min, pert.a1 - 1) *
Math.pow(pert.max - k, pert.a2 - 1)) /
Math.pow(pert.max - pert.min, pert.a1 + pert.a2 - 1)
});
}
var margin = {
top: 20,
right: 20,
bottom: 35,
left: 50
},
width = 250 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([pert.min, pert.max])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var xAxis1 = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.innerTickSize(-6)
.outerTickSize(0)
.tickPadding(7);
var yAxis1 = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.innerTickSize(-6)
.outerTickSize(0)
.tickPadding(7);
var xAxis2 = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(5)
.innerTickSize(-6)
.tickPadding(-20)
.outerTickSize(0)
.tickFormat("");
var yAxis2 = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.innerTickSize(6)
.tickPadding(-20)
.outerTickSize(0)
.tickFormat("");
var xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height, -height, 0)
.tickFormat("");
var yGrid = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, -width, 0)
.tickFormat("");
var line = d3.svg.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
})
.interpolate("linear");
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 1])
.on("zoom", redraw);
var svg = d3.select("#plot").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);
// Add x grid
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(xGrid);
// Add y grid
svg.append("g")
.attr("class", "y grid")
.call(yGrid);
svg.append("g")
.attr("class", "x1 axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis1);
svg.append("g")
.attr("class", "y1 axis")
.call(yAxis1);
/* append additional X axis */
svg.append("g")
.attr("class", "x2 axis")
.attr("transform", "translate(" + [0, 0] + ")")
.call(xAxis2);
/* append additional y axis */
svg.append("g")
.attr("class", "y2 axis")
.attr("transform", "translate(" + [width, 0] + ")")
.call(yAxis2);
// Add x axis label
svg.append("text")
.attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")")
.style("font-size", "15")
.style("text-anchor", "middle")
.text("x axis");
// Add y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("font-size", "15")
.style("text-anchor", "middle")
.text("y axis");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("path")
.attr("class", "line")
function redraw() {
pert.min = min - 0.001;
pert.mode = mode;
pert.max = max + 0.001;
pert.mu = (pert.min + 4 * pert.mode + pert.max) / 6;
pert.a1 = 6 * (pert.mu - pert.min) / (pert.max - pert.min);
pert.a2 = 6 * (pert.max - pert.mu) / (pert.max - pert.min);
pert.beta = betafn(pert.a1, pert.a2);
x.domain([pert.min, pert.max]);
svg.select(".x1.axis").call(xAxis1);
svg.select(".y1.axis").call(yAxis1);
svg.select(".x2.axis").call(xAxis2);
svg.select(".y2.axis").call(yAxis2);
svg.select(".x.grid").call(xGrid);
svg.select(".y.grid").call(yGrid);
var data = [];
for (var k = pert.min; k < pert.max; k += 0.1) {
data.push({
x: k,
y: (1 / pert.beta) * (Math.pow(k - pert.min, pert.a1 - 1) *
Math.pow(pert.max - k, pert.a2 - 1)) /
Math.pow(pert.max - pert.min, pert.a1 + pert.a2 - 1)
});
}
d3.select(".line").attr("d", line(data));
}
redraw();
</script>
</body>
</html>
In my D3 line chart, i´m trying to create a mouseover effect like in this example: http://bl.ocks.org/mbostock/3902569
In this example the author uses the bisector function, which is, as far as i understand, only supported for linear scales.
The problem is, that in my chart i have an ordinal x axis with different, discrete rangePoint tuples. So if it is like in the situation below (m = mouse position), i want to get the pixel position of the closest x value which would be x2 in this example.
m
|
x1----------x2----------x3
Is there any way to do that?
Using your linked example, here's a quick implementation of the mousemove function for an ordinal scale:
var tickPos = x.range();
function mousemove(d){
var m = d3.mouse(this),
lowDiff = 1e99,
xI = null;
// if you have a large number of ticks
// this search could be optimized
for (var i = 0; i < tickPos.length; i++){
var diff = Math.abs(m[0] - tickPos[i]);
if (diff < lowDiff){
lowDiff = diff;
xI = i;
}
}
focus
.select('text')
.text(ticks[xI]);
focus
.attr("transform","translate(" + tickPos[xI] + "," + y(data[xI].y) + ")");
}
Full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: steelblue;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundPoints([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)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
});
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 = [{
x: 'A',
y: Math.random() * 10
}, {
x: 'B',
y: Math.random() * 10
}, {
x: 'C',
y: Math.random() * 10
}, {
x: 'D',
y: Math.random() * 10
}, {
x: 'E',
y: Math.random() * 10
}, {
x: 'F',
y: Math.random() * 10
}, {
x: 'G',
y: Math.random() * 10
}, {
x: 'H',
y: Math.random() * 10
}, {
x: 'I',
y: Math.random() * 10
}, {
x: 'J',
y: Math.random() * 10
}];
var ticks = data.map(function(d) {
return d.x
});
x.domain(ticks);
y.domain(d3.extent(data, function(d) {
return d.y;
}));
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");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em")
.style('')
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", mousemove);
var tickPos = x.range();
function mousemove(d){
var m = d3.mouse(this),
lowDiff = 1e99,
xI = null;
for (var i = 0; i < tickPos.length; i++){
var diff = Math.abs(m[0] - tickPos[i]);
if (diff < lowDiff){
lowDiff = diff;
xI = i;
}
}
focus
.select('text')
.text(ticks[xI]);
focus
.attr("transform","translate(" + tickPos[xI] + "," + y(data[xI].y) + ")");
}
</script>
Simple Solution:
.on("mousemove", function () {
const x0 = x.invert(d3.mouse(d3.event.currentTarget)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i];
const rangeValueOfFirst = x(d0.date),
rangeValueOfSecond = x(d1.date),
rangeValueOfMousePos = d3.mouse(d3.event.currentTarget)[0],
closestD = Math.abs(rangeValueOfMousePos - rangeValueOfFirst) > Math.abs(rangeValueOfMousePos - rangeValueOfSecond) ? d1 : d0;
const focus = d3.select(".focus");
focus.attr("transform", () => "translate(" + x(closestD.date) + "," + y(closestD.close) + ")");
focus.select("text").text(closestD.close);
});