|
//Width and height |
|
var w = 200; |
|
var h = 200; |
|
var padding = 8; |
|
var scale_padding = 20; // space to show axes |
|
|
|
var dataset = [{"name": "A", "coord": {"Y": 80, "X": 80, "W": 10, "H": -60}, |
|
"children": [{"name": "AB", "coord": {"Y": 60, "X": 20, "W": 10, "H": -40}, "children": []}]}, |
|
{"name": "B", "coord": {"Y": 60, "X": 20, "W": 10, "H": -40}, "children": []}]; |
|
|
|
|
|
|
|
/*d3.json("layout.json", function (json) { |
|
|
|
drawRect(json); |
|
});*/ |
|
|
|
drawRect(dataset) |
|
|
|
function drawRect(json) { |
|
var xScale = d3.scale.linear() |
|
.domain([0, d3.max(json, function (d) { |
|
console.log(d) |
|
console.log(d.coord.X+ d.coord.W) |
|
return (d.coord.X+ d.coord.W); |
|
})]) |
|
.range([padding + scale_padding, w - padding]); |
|
|
|
var yScale = d3.scale.linear() |
|
.domain([0, d3.max(json, function (d) { |
|
console.log(d) |
|
return ( d.coord.Y); |
|
})]) |
|
.range([h - padding - scale_padding, padding]); |
|
|
|
//Define X axis |
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(5); |
|
|
|
//Define Y axis |
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left") |
|
.ticks(5); |
|
|
|
//Create SVG element |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
function click(d, i) { |
|
console.log("Zoom") |
|
} |
|
//Create circles |
|
svg.selectAll("rect") |
|
.data(json) |
|
.enter() |
|
.append("rect") |
|
.attr("x", function (d) { |
|
return xScale(d.coord.X); |
|
}) |
|
.attr("y", function (d) { |
|
return yScale(d.coord.Y); |
|
}) |
|
.attr("width", function (d) { |
|
var x2 = xScale(d.coord.X+ d.coord.W) |
|
var x1 = xScale(d.coord.X) |
|
return x2 - x1; |
|
}) |
|
.attr("height", function (d) { |
|
var y2 = yScale(d.coord.Y + d.coord.H); |
|
var y1 = yScale(d.coord.Y); |
|
console.log(y2 - y1) |
|
return y2 - y1; |
|
}) |
|
.on("click", click); |
|
//Create X axis |
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(0," + (h - padding - scale_padding) + ")") |
|
.call(xAxis); |
|
|
|
//Create Y axis |
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(" + (padding + scale_padding) + ",0)") |
|
.call(yAxis); |
|
} |
