Skip to content

Instantly share code, notes, and snippets.

@alanland

alanland/index.html

Last active December 17, 2015 23:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alanland/5692771 to your computer and use it in GitHub Desktop.
Save alanland/5692771 to your computer and use it in GitHub Desktop.
Download ZIP
仓位图
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="storeroom.js"></script>
<style>
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: Courier, monospace, arial, sans-serif;
}
#l-map {
height: 100%;
width: 78%;
float: left;
border-right: 2px solid #bcbcbc;
}
#r-result {
height: 100%;
width: 20%;
float: left;
}
svg {
background-color: rgba(100, 0, 0, 0.1);
}
rect {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-size: 11px;
}
/*消除事件遮盖*/
svg text {
pointer-events: none;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
/*padding: 10px;*/
/*background: white;*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
opacity: 1;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
/*background: transparent ;*/
background: rgba(54, 134, 172, 0.7);
border: 6px solid transparent;
z-index: 1000001;
color: black;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
/*text-shadow: 0 -1px 0 rgba(69,135,170,0.4);*/
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
/*font-family: sans-serif;*/
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="tooltip" class='hidden'>
<p><strong>储位信息</strong></p>
<p>储位：<span id="tooltip-location"></span></p>
<p>使用率：<span id="tooltip-value">100</span></p>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../lib/interpolate-zoom.js"></script>
<script src="../lib/jquery-1.8.2.min.js"></script>
<!--<script src="http://d3js.org/d3.v3.min.js"></script>-->
<script src="storeroom.js"></script>
<script>
var w = parseFloat(document.body.clientWidth);
var h = parseFloat(document.body.clientHeight);
var dataset = data.children;
var svgPadding = [30, 30];
var padding = 5;
var zoomed = false;
var cols = d3.max(dataset, function (d) {
return d.x;
}) + 1;
var rows = d3.max(dataset, function (d) {
return d.y;
}) + 1;
var getGradientId = function (d) {
return 'gradient' + d.x + '-' + d.y;
};
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h).append('g');
var xScale = d3.scale.linear()
.domain([0, cols])
.range([svgPadding[0], w - svgPadding[0]]);
var yScale = d3.scale.linear()
.domain([0, rows])
.range([svgPadding[0], h - svgPadding[1]]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('top');
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
var width = xScale(2) - xScale(1) - padding;
var height = yScale(2) - yScale(1) - padding;
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,30)')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(30,0)')
.call(yAxis);
// 添加渐变
dataset.forEach(function (d) {
var gradient = svg
.append("linearGradient")
.attr("y1", yScale(d.y) - height / 2)
.attr("y2", yScale(d.y) - height / 2)
.attr("x1", xScale(d.x) - width / 2)
.attr("x2", xScale(d.x) + width / 2)
.attr("id", getGradientId(d))
.attr("gradientUnits", "userSpaceOnUse");
var ratio = parseInt(d.used * 2.55);
var color1 = 'rgb(' + ratio + ',' + (255 - ratio) + ',0)';
var color2 = 'blue';
gradient.append("stop")
.attr("offset", "0")
.attr("stop-color", color1);
gradient.append("stop")
.attr("offset", ratio / 255)
.attr("stop-color", color1);
gradient.append("stop")
.attr("offset", ratio / 255)
.attr("stop-color", color2)
.attr("stop-opacity", 0.3);
gradient.append("stop")
.attr("offset", "1")
.attr("stop-color", color2)
.attr("stop-opacity", 0.4);
});
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function (d) {
return xScale(d.x) - width / 2;
})
.attr('y', function (d) {
return yScale(d.y) - height / 2;
})
.attr('width', width)
.attr('height', height)
.attr('fill', function (d) {
var ratio = parseInt(d.used * 2.55);
return 'rgb(' + ratio + ',' + (255 - ratio) + ',0)';
})
.attr("fill", function (d) {
return "url(#" + getGradientId(d) + ")"
})
.on('mouseover', function (d) {
var xPosition = parseFloat(d3.select(this).attr('x')) + width * .5;
var yPosition = parseFloat(d3.select(this).attr('y')) + height * .5;
d3.select('#tooltip')
.style('left', xPosition + 'px')
.style('top', yPosition + 'px')
.select('#tooltip-location')
.text(d.x + '-' + d.y);
d3.select('#tooltip-value')
.text(d.used + '/' + d.capacity);
d3.select('#tooltip').classed('hidden', false);
// $("rect").stop().fadeTo(300, 0.2);
// $(this).stop().fadeTo(0, 1.0);
})
.on('mouseout', function () {
// d3.select('#tooltip').remove();
d3.select('#tooltip').classed('hidden', true);
// $("rect").stop().fadeTo("fast", 1.0);
// COS.app.views.title.update();
})
.on('click', function (d) {
zoomed = !zoomed;
var pointAll = [w / 2, h / 2, w / 2 + svgPadding[0]];
var pointD = [xScale(d.x), yScale(d.y), width / 2 + padding];
var start = zoomed ? pointAll : pointD, end = zoomed ? pointD : pointAll;
transition(svg, start, end);
});
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', function (d) {
return xScale(d.x);
})
.attr('y', function (d) {
return yScale(d.y);
})
.attr('text-anchor', 'middle')
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr('fill', 'black')
.text(function (d) {
return d.x + '-' + d.y;
});
var p0 = [w / 2, h / 2, w / 2 + svgPadding[0]];
transition(svg, p0, p0);
function transition(svg, start, end) {
var center = [w / 2, h / 2],
i = d3.interpolateZoom(start, end);
svg
// .attr("transform", transform(start))
.transition()
.delay(50)
.duration(i.duration )
.attrTween("transform", function () {
return function (t) {
return transform(i(t));
};
});
// .each("end", function () {
// d3.select(this).call(transition, end, start);
// });
function transform(p) {
var k = h / p[2];
return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
}
}
</script>
</body>
</html>
Raw
storeroom.js
var data = {
name:'仓库',
"children": [
{
"x": 1,
"y": 1,
"capacity": 100,
"used": 88
},
{
"x": 1,
"y": 2,
"capacity": 100,
"used": 41
},
{
"x": 1,
"y": 3,
"capacity": 100,
"used": 26
},
{
"x": 1,
"y": 4,
"capacity": 100,
"used": 42
},
{
"x": 1,
"y": 5,
"capacity": 100,
"used": 30
},
{
"x": 1,
"y": 6,
"capacity": 100,
"used": 96
},
{
"x": 1,
"y": 7,
"capacity": 100,
"used": 35
},
{
"x": 1,
"y": 8,
"capacity": 100,
"used": 91
},
{
"x": 1,
"y": 9,
"capacity": 100,
"used": 33
},
{
"x": 1,
"y": 10,
"capacity": 100,
"used": 27
},
{
"x": 1,
"y": 11,
"capacity": 100,
"used": 28
},
{
"x": 1,
"y": 12,
"capacity": 100,
"used": 64
},
{
"x": 2,
"y": 1,
"capacity": 100,
"used": 5
},
{
"x": 2,
"y": 2,
"capacity": 100,
"used": 89
},
{
"x": 2,
"y": 3,
"capacity": 100,
"used": 19
},
{
"x": 2,
"y": 4,
"capacity": 100,
"used": 10
},
{
"x": 2,
"y": 5,
"capacity": 100,
"used": 88
},
{
"x": 2,
"y": 6,
"capacity": 100,
"used": 94
},
{
"x": 2,
"y": 7,
"capacity": 100,
"used": 99
},
{
"x": 2,
"y": 8,
"capacity": 100,
"used": 71
},
{
"x": 2,
"y": 9,
"capacity": 100,
"used": 98
},
{
"x": 2,
"y": 10,
"capacity": 100,
"used": 34
},
{
"x": 2,
"y": 11,
"capacity": 100,
"used": 4
},
{
"x": 2,
"y": 12,
"capacity": 100,
"used": 34
},
{
"x": 3,
"y": 1,
"capacity": 100,
"used": 56
},
{
"x": 3,
"y": 2,
"capacity": 100,
"used": 16
},
{
"x": 3,
"y": 3,
"capacity": 100,
"used": 8
},
{
"x": 3,
"y": 4,
"capacity": 100,
"used": 93
},
{
"x": 3,
"y": 5,
"capacity": 100,
"used": 95
},
{
"x": 3,
"y": 6,
"capacity": 100,
"used": 26
},
{
"x": 3,
"y": 7,
"capacity": 100,
"used": 72
},
{
"x": 3,
"y": 8,
"capacity": 100,
"used": 86
},
{
"x": 3,
"y": 9,
"capacity": 100,
"used": 52
},
{
"x": 3,
"y": 10,
"capacity": 100,
"used": 58
},
{
"x": 3,
"y": 11,
"capacity": 100,
"used": 52
},
{
"x": 3,
"y": 12,
"capacity": 100,
"used": 95
},
{
"x": 4,
"y": 1,
"capacity": 100,
"used": 97
},
{
"x": 4,
"y": 2,
"capacity": 100,
"used": 14
},
{
"x": 4,
"y": 3,
"capacity": 100,
"used": 66
},
{
"x": 4,
"y": 4,
"capacity": 100,
"used": 58
},
{
"x": 4,
"y": 5,
"capacity": 100,
"used": 27
},
{
"x": 4,
"y": 6,
"capacity": 100,
"used": 58
},
{
"x": 4,
"y": 7,
"capacity": 100,
"used": 24
},
{
"x": 4,
"y": 8,
"capacity": 100,
"used": 74
},
{
"x": 4,
"y": 9,
"capacity": 100,
"used": 88
},
{
"x": 4,
"y": 10,
"capacity": 100,
"used": 99
},
{
"x": 4,
"y": 11,
"capacity": 100,
"used": 23
},
{
"x": 4,
"y": 12,
"capacity": 100,
"used": 10
},
{
"x": 5,
"y": 1,
"capacity": 100,
"used": 37
},
{
"x": 5,
"y": 2,
"capacity": 100,
"used": 5
},
{
"x": 5,
"y": 3,
"capacity": 100,
"used": 84
},
{
"x": 5,
"y": 4,
"capacity": 100,
"used": 43
},
{
"x": 5,
"y": 5,
"capacity": 100,
"used": 97
},
{
"x": 5,
"y": 6,
"capacity": 100,
"used": 27
},
{
"x": 5,
"y": 7,
"capacity": 100,
"used": 23
},
{
"x": 5,
"y": 8,
"capacity": 100,
"used": 61
},
{
"x": 5,
"y": 9,
"capacity": 100,
"used": 42
},
{
"x": 5,
"y": 10,
"capacity": 100,
"used": 48
},
{
"x": 5,
"y": 11,
"capacity": 100,
"used": 33
},
{
"x": 5,
"y": 12,
"capacity": 100,
"used": 63
},
{
"x": 6,
"y": 1,
"capacity": 100,
"used": 27
},
{
"x": 6,
"y": 2,
"capacity": 100,
"used": 83
},
{
"x": 6,
"y": 3,
"capacity": 100,
"used": 37
},
{
"x": 6,
"y": 4,
"capacity": 100,
"used": 84
},
{
"x": 6,
"y": 5,
"capacity": 100,
"used": 82
},
{
"x": 6,
"y": 6,
"capacity": 100,
"used": 18
},
{
"x": 6,
"y": 7,
"capacity": 100,
"used": 59
},
{
"x": 6,
"y": 8,
"capacity": 100,
"used": 44
},
{
"x": 6,
"y": 9,
"capacity": 100,
"used": 26
},
{
"x": 6,
"y": 10,
"capacity": 100,
"used": 40
},
{
"x": 6,
"y": 11,
"capacity": 100,
"used": 89
},
{
"x": 6,
"y": 12,
"capacity": 100,
"used": 98
},
{
"x": 7,
"y": 1,
"capacity": 100,
"used": 48
},
{
"x": 7,
"y": 2,
"capacity": 100,
"used": 60
},
{
"x": 7,
"y": 3,
"capacity": 100,
"used": 29
},
{
"x": 7,
"y": 4,
"capacity": 100,
"used": 21
},
{
"x": 7,
"y": 5,
"capacity": 100,
"used": 9
},
{
"x": 7,
"y": 6,
"capacity": 100,
"used": 99
},
{
"x": 7,
"y": 7,
"capacity": 100,
"used": 73
},
{
"x": 7,
"y": 8,
"capacity": 100,
"used": 21
},
{
"x": 7,
"y": 9,
"capacity": 100,
"used": 32
},
{
"x": 7,
"y": 10,
"capacity": 100,
"used": 89
},
{
"x": 7,
"y": 11,
"capacity": 100,
"used": 20
},
{
"x": 7,
"y": 12,
"capacity": 100,
"used": 0
},
{
"x": 8,
"y": 1,
"capacity": 100,
"used": 62
},
{
"x": 8,
"y": 2,
"capacity": 100,
"used": 36
},
{
"x": 8,
"y": 3,
"capacity": 100,
"used": 90
},
{
"x": 8,
"y": 4,
"capacity": 100,
"used": 42
},
{
"x": 8,
"y": 5,
"capacity": 100,
"used": 57
},
{
"x": 8,
"y": 6,
"capacity": 100,
"used": 39
},
{
"x": 8,
"y": 7,
"capacity": 100,
"used": 32
},
{
"x": 8,
"y": 8,
"capacity": 100,
"used": 99
},
{
"x": 8,
"y": 9,
"capacity": 100,
"used": 94
},
{
"x": 8,
"y": 10,
"capacity": 100,
"used": 35
},
{
"x": 8,
"y": 11,
"capacity": 100,
"used": 87
},
{
"x": 8,
"y": 12,
"capacity": 100,
"used": 98
},
{
"x": 9,
"y": 1,
"capacity": 100,
"used": 91
},
{
"x": 9,
"y": 2,
"capacity": 100,
"used": 59
},
{
"x": 9,
"y": 3,
"capacity": 100,
"used": 16
},
{
"x": 9,
"y": 4,
"capacity": 100,
"used": 51
},
{
"x": 9,
"y": 5,
"capacity": 100,
"used": 8
},
{
"x": 9,
"y": 6,
"capacity": 100,
"used": 77
},
{
"x": 9,
"y": 7,
"capacity": 100,
"used": 30
},
{
"x": 9,
"y": 8,
"capacity": 100,
"used": 95
},
{
"x": 9,
"y": 9,
"capacity": 100,
"used": 11
},
{
"x": 9,
"y": 10,
"capacity": 100,
"used": 65
},
{
"x": 9,
"y": 11,
"capacity": 100,
"used": 15
},
{
"x": 9,
"y": 12,
"capacity": 100,
"used": 38
},
{
"x": 10,
"y": 1,
"capacity": 100,
"used": 16
},
{
"x": 10,
"y": 2,
"capacity": 100,
"used": 14
},
{
"x": 10,
"y": 3,
"capacity": 100,
"used": 27
},
{
"x": 10,
"y": 4,
"capacity": 100,
"used": 86
},
{
"x": 10,
"y": 5,
"capacity": 100,
"used": 64
},
{
"x": 10,
"y": 6,
"capacity": 100,
"used": 75
},
{
"x": 10,
"y": 7,
"capacity": 100,
"used": 95
},
{
"x": 10,
"y": 8,
"capacity": 100,
"used": 72
},
{
"x": 10,
"y": 9,
"capacity": 100,
"used": 12
},
{
"x": 10,
"y": 10,
"capacity": 100,
"used": 40
},
{
"x": 10,
"y": 11,
"capacity": 100,
"used": 87
},
{
"x": 10,
"y": 12,
"capacity": 100,
"used": 2
},
{
"x": 11,
"y": 1,
"capacity": 100,
"used": 50
},
{
"x": 11,
"y": 2,
"capacity": 100,
"used": 59
},
{
"x": 11,
"y": 3,
"capacity": 100,
"used": 19
},
{
"x": 11,
"y": 4,
"capacity": 100,
"used": 36
},
{
"x": 11,
"y": 5,
"capacity": 100,
"used": 75
},
{
"x": 11,
"y": 6,
"capacity": 100,
"used": 56
},
{
"x": 11,
"y": 7,
"capacity": 100,
"used": 87
},
{
"x": 11,
"y": 8,
"capacity": 100,
"used": 8
},
{
"x": 11,
"y": 9,
"capacity": 100,
"used": 17
},
{
"x": 11,
"y": 10,
"capacity": 100,
"used": 4
},
{
"x": 11,
"y": 11,
"capacity": 100,
"used": 97
},
{
"x": 11,
"y": 12,
"capacity": 100,
"used": 67
},
{
"x": 12,
"y": 1,
"capacity": 100,
"used": 81
},
{
"x": 12,
"y": 2,
"capacity": 100,
"used": 68
},
{
"x": 12,
"y": 3,
"capacity": 100,
"used": 79
},
{
"x": 12,
"y": 4,
"capacity": 100,
"used": 14
},
{
"x": 12,
"y": 5,
"capacity": 100,
"used": 39
},
{
"x": 12,
"y": 6,
"capacity": 100,
"used": 68
},
{
"x": 12,
"y": 7,
"capacity": 100,
"used": 100
},
{
"x": 12,
"y": 8,
"capacity": 100,
"used": 28
},
{
"x": 12,
"y": 9,
"capacity": 100,
"used": 33
},
{
"x": 12,
"y": 10,
"capacity": 100,
"used": 87
},
{
"x": 12,
"y": 11,
"capacity": 100,
"used": 54
},
{
"x": 12,
"y": 12,
"capacity": 100,
"used": 75
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment