-
(function() {
var drag, dragging, highlight, rota_1, svg, zoom, zoom_group;
svg = d3.select('svg');
zoom_group = svg.select('#zoom_group');
zoom = d3.behavior.zoom().scaleExtent([1, 4]).on('zoom', function() {
return zoom_group.attr({
transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
});
});
svg.call(zoom);
rota_1 = svg.select('#rota_1').datum({
offset: 6,
pinch_offset: null
});
rota_1.transition().duration(1200).attr('transform', 'rotate(' + rota_1.datum().offset + ')');
dragging = false;
drag = d3.behavior.drag().on('dragstart', function() {
d3.event.sourceEvent.stopPropagation();
dragging = true;
return d3.select(this).classed('highlighted', true);
}).on('drag', function() {
var angle, d, rota;
rota = d3.select(this);
d = rota.datum();
if (d.pinch_offset == null) {
d.pinch_offset = 180 / Math.PI * Math.atan2(d3.event.y, d3.event.x) + 180 - d.offset;
}
angle = 180 / Math.PI * Math.atan2(d3.event.y, d3.event.x) + 180;
d.offset = angle - d.pinch_offset;
return rota.attr('transform', 'rotate(' + d.offset + ')');
}).on('dragend', function() {
d3.select(this).datum().pinch_offset = null;
dragging = false;
return d3.select(this).classed('highlighted', false);
});
highlight = function(rota) {
return rota.on('mousemove', function() {
if (!dragging) {
return d3.select(this).classed('highlighted', true);
}
}).on('mouseout', function() {
if (!dragging) {
return d3.select(this).classed('highlighted', false);
}
});
};
rota_1.call(drag).call(highlight);
d3.select(self.frameElement).style('height', '800px');
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Interactive rota III"/>
<title>Interactive rota III</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg height="800" width="960">
<defs>
<pattern id="rota_img"
patternUnits="userSpaceOnUse"
x="-477.5"
y="-308"
width="780"
height="780"
viewBox="0 0 780 780">
<image
xlink:href="//wafi.iit.cnr.it/webvis/tmp/clavius/rota_3.jpg"
x="87"
y="10"
height="780"
width="780"
/>
</pattern>
<pattern id="rota_hand_img"
patternUnits="userSpaceOnUse"
x="-477.5"
y="-308"
width="780"
height="780"
viewBox="0 0 780 780">
<image
xlink:href="//wafi.iit.cnr.it/webvis/tmp/clavius/rota_3_hand.jpg"
x="87"
y="10"
height="780"
width="780"
/>
</pattern>
</defs>
<g id="zoom_group">
<g transform="translate(478,310)">
<rect
fill="url(#rota_img)"
x="-391"
y="-300"
width="780"
height="780"
/>
<g id="rota_1" class="rota">
<path
fill="url(#rota_hand_img)"
d="m 61.113344,-282.44625 -3.286977,1.11962 -1.941371,0.47251 -2.115992,4.22171 -1.818109,-0.82175 -1.232617,0.34924 -1.407237,1.18126 -0.585493,1.17099 0.236252,1.64349 0.698483,1.52022 0.236251,1.41751 -1.520227,1.69485 -1.643489,0.64712 -1.643488,0.0616 -2.115992,-0.53413 -2.701484,0.23625 -1.643489,0.82175 -1.057996,1.40723 -0.349241,1.46887 -0.123262,1.94137 -2.691212,-0.0616 -47.558452,209.873497 c -23.707054,5.89007 -41.292652,27.31432 -41.292652,52.83815956 0,30.06248044 24.388349,54.45083044 54.45083259,54.45083044 30.06248341,0 54.45083241,-24.38835 54.45083241,-54.45083044 0,-25.63536956 -17.736592,-47.14117956 -41.600806,-52.92032956 l 25.884946,-114.058117 18.900119,-81.22942 0.472503,-1.5305 -0.760113,-0.11299 6.984826,-30.76405 0,-0.93474 -1.76675,-0.64712 -1.458596,-0.4725 z"/>
<path
class="highlight"
d="m 61.113344,-282.44625 -3.286977,1.11962 -1.941371,0.47251 -2.115992,4.22171 -1.818109,-0.82175 -1.232617,0.34924 -1.407237,1.18126 -0.585493,1.17099 0.236252,1.64349 0.698483,1.52022 0.236251,1.41751 -1.520227,1.69485 -1.643489,0.64712 -1.643488,0.0616 -2.115992,-0.53413 -2.701484,0.23625 -1.643489,0.82175 -1.057996,1.40723 -0.349241,1.46887 -0.123262,1.94137 -2.691212,-0.0616 -47.558452,209.873497 c -23.707054,5.89007 -41.292652,27.31432 -41.292652,52.83815956 0,30.06248044 24.388349,54.45083044 54.45083259,54.45083044 30.06248341,0 54.45083241,-24.38835 54.45083241,-54.45083044 0,-25.63536956 -17.736592,-47.14117956 -41.600806,-52.92032956 l 25.884946,-114.058117 18.900119,-81.22942 0.472503,-1.5305 -0.760113,-0.11299 6.984826,-30.76405 0,-0.93474 -1.76675,-0.64712 -1.458596,-0.4725 z"
/>
</g>
</g>
</g>
</svg>
<script src="index.js"></script>
</body>
</html>svg = d3.select('svg')
zoom_group = svg.select('#zoom_group')
# define a zoom behavior
zoom = d3.behavior.zoom()
.scaleExtent([1,4]) # min-max zoom
.on 'zoom', () ->
# GEOMETRIC ZOOM
zoom_group
.attr
transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"
# bind the zoom behavior to the main SVG
svg.call(zoom)
rota_1 = svg.select('#rota_1')
.datum({
offset: 6,
pinch_offset: null
})
rota_1
.transition().duration(1200)
.attr('transform', 'rotate('+rota_1.datum().offset+')')
# define a drag behavior to let the user rotate the arcs
dragging = false
drag = d3.behavior.drag()
.on 'dragstart', () ->
# silence other listeners (disable pan when dragging)
# see https://github.com/mbostock/d3/wiki/Drag-Behavior
d3.event.sourceEvent.stopPropagation()
dragging = true
# highlight
d3.select(this).classed('highlighted', true)
.on 'drag', () ->
rota = d3.select(this)
d = rota.datum()
if not d.pinch_offset?
d.pinch_offset = 180/Math.PI*Math.atan2(d3.event.y,d3.event.x)+180-d.offset
# current angle in positive degrees
angle = 180/Math.PI*Math.atan2(d3.event.y, d3.event.x)+180
d.offset = angle-d.pinch_offset
rota
.attr('transform', 'rotate('+d.offset+')')
.on 'dragend', () ->
d3.select(this).datum().pinch_offset = null
dragging = false
# highlight
d3.select(this).classed('highlighted', false)
highlight = (rota) ->
rota
.on 'mousemove', () ->
# highlight
if not dragging
d3.select(this).classed('highlighted', true)
.on 'mouseout', () ->
# highlight
if not dragging
d3.select(this).classed('highlighted', false)
rota_1
.call(drag)
.call(highlight)
d3.select(self.frameElement).style('height', '800px')svg {
background: #0C0C0C;
}
.rota {
cursor: move;
}
.rota .highlight {
display: none;
fill: yellow;
opacity: 0.06;
}
.rota.highlighted .highlight {
display: inline;
}