I've made a line graph with a brush to zoom in. The first time I load the csv file, the brush works correctly. Problem is, after I load a different csv file from the dropdown menu, just clicking on the brush makes the line disappear. I haven't seen any examples showing something like that, so can anyone help? Here is the result plunker
And here is the code of the graph:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="../d3/d3.js"></script>
<script type="text/javascript" src="../d3/d3-tip.js"></script>
<style type="text/css">
body{
font: 16px Calibri;
}
.line{
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.brushLine{
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.brush .extent{
strokg: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.axis path,
.axis line{
fill:none;
stroke: black;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 14px;
stroke: black;
stroke-width: 0.5px;
}
</style>
<!--...this code will be used on an external html file and instered-->
<?php
include('../dropdownMetrics.php');
?>
<!--...............................................................-->
</head>
<body>
<script type="text/javascript">
var margin = {top: 60, right: 20, bottom: 40, left: 40},
margin2 = {top: 430, right: 20, bottom: 20, left: 40},
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 =900 - margin2.top,
height3= 500 - margin2.top - margin2.bottom;
var x = d3.scale.linear()
.range([0, width]);
var x1 = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var y1 = d3.scale.linear()
.range([height3, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var x1Axis = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var brush = d3.svg.brush()
.x(x1)
.on("brush", brushed);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height2 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//-------------------------defining focus and context------------------------
var focus = svg.append("g")
.attr("class","focus");
var context = svg.append("g")
.attr("class","context")
.attr("transform", "translate(" + 0 + "," + margin2.top + ")");
//-------------------------defining the focus and brush lines----------------
var line = d3.svg.line()
.x(function(d) { return x(d.trID);})
.y(function (d) {return y(d.newT);})
.interpolate("basis");
var brushLine = d3.svg.line()
.x(function(d) { return x(d.trID);})
.y(function (d) {return y1(d.newT);})
.interpolate("basis");
//---------------------------------------------------------------------------
var dsv = d3.dsv(";", "text/plain"); //setting the delimiter
var dataset = [] //defining the data array
var datapath="../CSV/atlas/results/metrics.csv";
dsv(datapath, function(data){ //------------select the file to load the csv------------
var label = document.getElementById('opts')[document.getElementById('opts').selectedIndex].innerHTML;//takes the name of the f
console.log(label);
dataset= data.map(function(d){ //parse
return { //insert parsed data in the array
trID: +d["trID"],
newT: +d["#newT"]
};
});
console.log(dataset);
x.domain(d3.extent(dataset, function(d) { return d.trID; }));
x1.domain(x.domain());
y.domain(d3.extent(dataset, function(d) { return d.newT; }));
y1.domain(y.domain());
focus.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("trID");
focus.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("num of tables");
context.append("path")
.datum(dataset)
.attr("class", "brushLine")
.attr("d", brushLine);
context.append("g")
.attr("class", "x1 axis")
.attr("transform", "translate(0," + height3 + ")")
.call(x1Axis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("trID");
context.append("g")
.attr("class","x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height3 +7);
svg.append("text")
.attr("class","simpletext")
.attr("x", (width/2))
.attr("y", 0 - (margin.top/2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("text-decoration", "underline")
.text(label);
});
d3.select('#opts')
.on('change', function(){
var dataset=[]
var datapath = eval(d3.select(this).property('value'));
label = document.getElementById('opts')[document.getElementById('opts').selectedIndex].innerHTML;
dsv(datapath, function(data){ //------------select the file to load the csv------------
dataset= data.map(function(d){ //parse
return { //insert parsed data in the array
trID: +d["trID"],
newT: +d["#newT"]
};
});
x.domain(d3.extent(dataset, function(d) { return d.trID; }));
x1.domain(x.domain());
y.domain(d3.extent(dataset, function(d) { return d.newT; }));
y1.domain(y.domain());
d3.selectAll(".line")
.transition()
.duration(1000)
.attr("d", line(dataset));
//Update Axis
//Update X axis
focus.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
//Update Y axis
focus.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
focus.selectAll("path")
.data(dataset)
.exit()
.remove();
console.log(label);
d3.selectAll(".brushLine")
.transition()
.duration(1000)
.attr("d", brushLine(dataset));
context.select(".x1.axis")
.transition()
.duration(1000)
.call(x1Axis);
context.select(".x.brush")
.call(brush);
svg.selectAll(".simpletext")
.transition()
.text(label);
});
});
function brushed(){
x.domain(brush.empty()? x1.domain() : brush.extent());
focus.select(".line")
.attr("d", line);
focus.select(".x.axis").call(xAxis);
}
</script>
</body>
</html>
via
Chebli Mohamed
