hi,
I'm working on a graph with this code:
<!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;
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 + ")"); //do a transformation where by it translates the element and its children by 80 units
// 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 + ")");
//scales
var xScale = d3.scale.linear().range([0, width]); //Constructs a new linear scale with this range and domain(s.unten)
var yScale = d3.scale.linear().range([height, 0]);
var x2Scale = d3.scale.linear().range([0, width2]);
var y2Scale = d3.scale.linear().range([height2, 0]);
//axis
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(vertical axis with ticks to the right of the domain path)
var x2Axis = d3.svg.axis().scale(x2Scale).tickSize(-height2).tickSubdivide(true),
y2Axis = d3.svg.axis().scale(y2Scale).ticks(4).orient("right");
// 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);
//file
var drawDefects = function(id){
d3.csv("data/"+id+"_OS.csv", dataconvert,
function(error, dataset){
// defects_rect = svg.selectAll("rect").data(dataset);
//more elements
mydataset = dataset;
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);
})
}
//Maybe I have to add here some code
var brush = d3.svg.brush() //Constructs a new brush
.x(xScale)
.y(yScale)
.extent([[Laenge/3,0.2],[2*Laenge/3,0.5]])
.on("brushend",function(){
var dataset_filtered = mydataset.filter(myfilter);
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);
//second graph(zoom)
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
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"
}) //Math.ceil(x) function returns the smallest integer greater than or equal to a number "x".
.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);
}
);
svg.append("g")
.attr("class", "brush")
.call(brush);
var dataconvert = function(d){
drawDefects("1146741");
...
...
...
....
}
</script>
<div id="container"></div>
<div id="container2"></div>
</body>
</html>
I think on the constructed brush is something missed. I need a brush component to implement focus + context zooming.
The zooming works(showing in a 2nd graph) but I can't create a new brush if I click somewhere else on the graph. maybe I can do it with .on("click"..) or brushstart and brushend?
How can I do it?
Thanks in advance!
