<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3.js Learning csv data</title>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<style>
/* svg styles!! */
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.brush .extent {
fill-opacity: .2; /* auf .1 zurücksetzten */
stroke: #fff;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script>
window.onload = function(){
// define dimensions of canvas
var margin = {top: 80, right: 80, bottom: 80, left: 80},
width = 800 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
width2 = 800 - margin.left - margin.right,
height2 = 400 - margin.top - margin.bottom;
var mydataset = {};//global verfügbar machen
// Add an SVG element with the desired dimensions and margin.
var svg = d3.select("#container")
.append("svg")
.attr("float", "left")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g") //Elemente gruppieren
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Add an second SVG element with the desired dimensions and margin.
var svg2 = d3.select("#container2")
.append("svg")
.attr("width", width2 + margin.left + margin.right)
.attr("height", height2 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//erzeuge Bereiche scales
var xScale = d3.scale.linear().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var x2Scale = d3.scale.linear().range([0, width2]);
var y2Scale = d3.scale.linear().range([height2, 0]);
//erzeuge achsen
var xAxis = d3.svg.axis().scale(xScale).tickSize(-height).tickSubdivide(true), //sets the scale and returns the axis
yAxis = d3.svg.axis().scale(yScale).ticks(4).orient("right"); //orientation right
var x2Axis = d3.svg.axis().scale(x2Scale).tickSize(-height2).tickSubdivide(true),
y2Axis = d3.svg.axis().scale(y2Scale).ticks(4).orient("right");
// Bereich zum rendern der Achsen festlegen
// Add the x-axis.
var x = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");
// Add the y-axis.
var y = svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)");
var x2 = svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")");
// Add the y-axis.
var y2 = svg2.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width2 + ",0)");
//domain wird festgelegt
var Breite = 1.274;
var Laenge = 2191.094;
xScale.domain([0,Laenge]);
yScale.domain([0,Breite]);
x.call(xAxis); //aufrufen
y.call(yAxis);
//die daten besorgen, csv datei aufrufen
var drawDefects = function(id){
d3.csv("data/"+id+"_OS.csv", dataconvert, //dataconvert wird aufgerufen
function(error, dataset){
//bereits bestehende Elemente mit Daten versorgen
//zusätzliche Elemente hinzufügen
mydataset = dataset; // gelesene Daten global verfügbar machen
svg.selectAll("rect").data(dataset)
.enter()
.append("rect")
.attr("x", function(d){return xScale(d.Y_START) +"px"})
.attr("y", function(d){return yScale(d.X_START)+"px"})
.attr("width", function(d){ return Math.ceil(d.DIM_LAENGE/width)+"px"})
.attr("height", function(d){return Math.ceil(d.DIM_BREITE/height)+"px";})
.attr("fill","none")
.style("pointer-events","none")
.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
.attr("stroke-width", "1px")
.attr("stroke-opacity",0.4);
})
}
//Es ensteht eine transparente fläche auf dem Graphen, diese Position wird im zweiten Graph gezoomt dargestellt
var brush = d3.svg.brush() //Constructs a new brush
.x(xScale)
.y(yScale)
.extent([[Laenge/3,0.2],[2*Laenge/3,0.5]]) //sets the extent to the specified values and returns the brush.
.on("brushend",function(){
var dataset_filtered = mydataset.filter(myfilter);
//var extent = d3.event.target.extent()
x2Scale.domain([brush.extent()[0][0],brush.extent()[1][0]]);
y2Scale.domain([brush.extent()[0][1],brush.extent()[1][1]]);
x2.transition().call(x2Axis);
y2.transition().call(y2Axis);
//Hier Daten aus der Übersicht in die Detailsicht einfügen, zweiter Graph
//select bereits bestehende Elemente für Update
svg2.selectAll("rect").data([]).exit().remove(); // Alles erst mal raus
var defects = svg2.selectAll("rect").data(dataset_filtered); //The result of the data operator is the update selection
//Elemente für zusätzliche Daten einfügen
defects.enter() //placeholder nodes for each data element
.append("rect")
.attr("x", function(d){return x2Scale(d.Y_START) +"px"})
.attr("y", function(d){return y2Scale(d.X_START)+"px"})
.attr("width", function(d){
return Math.ceil(d.DIM_LAENGE*width2/(brush.extent()[1][0]-brush.extent()[0][0]))+"px"
})
.attr("height", function(d){
return Math.ceil(d.DIM_BREITE*height2/(brush.extent()[1][1]-brush.extent()[0][1]))+"px";
})
.attr("fill","none")
.style("pointer-events","none")
.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
.attr("stroke-width", "1px")
.attr("stroke-opacity",0.4);
//überflüssige Elemente entfernen
}
);
svg.append("g")
.attr("class", "brush")
.call(brush);
var dataconvert = function(d){ //Die gelesenen Daten werden hier konvertiert, falls notwendig
//je nach Schweregrad enstehen farbige Punkte im Graph
switch (d.INFO_SCHWEREGRAD){
case "1": d.INFO_SCHWEREGRAD = "mediumturquoise"; break;
case "2": d.INFO_SCHWEREGRAD = "forestgreen"; break;
case "3": d.INFO_SCHWEREGRAD = "orange"; break;
case "4": d.INFO_SCHWEREGRAD = "lightcoral"; break;
default: d.INFO_SCHWEREGRAD = "darkred"; break;
}
return d;
}
var myfilter = function(d){
//var upper = brush.extent()[1][1],
// lower = brush.extent()[0][1],
// left = brush.extent()[0][0],
// right = brush.extent()[1][0]
return (
(d.Y_START > brush.extent()[0][0] && d.Y_START < brush.extent()[1][0] && d.X_START > brush.extent()[0][1] && d.X_START < brush.extent()[1][1]) ||
(d.Y_START+d.DIM_LAENGE > brush.extent()[0][0] && d.Y_START+d.DIM_LAENGE < brush.extent()[1][0] && d.X_START > brush.extent()[0][1] && d.X_START < brush.extent()[1][1]) ||
(d.Y_START > brush.extent()[0][0] && d.Y_START < brush.extent()[1][0] && d.X_START+d.DIM_BREITE > brush.extent()[0][1] && d.X_START+d.DIM_BREITE < brush.extent()[1][1]) ||
(d.Y_START+d.DIM_LAENGE > brush.extent()[0][0] && d.Y_START+d.DIM_LAENGE < brush.extent()[1][0] && d.X_START+d.DIM_BREITE > brush.extent()[0][1] && d.X_START+d.DIM_BREITE < brush.extent()[1][1])
);
//return (d.INFO_SCHWEREGRAD == "lightcoral" || d.INFO_SCHWEREGRAD == "orange");
}
drawDefects("1146741");
}
</script>
<div id="container"></div>
<div id="container2"></div>
</body>
</html>
