alex/restaurant-search
1
Fork 0
Code Releases Activity

Drawing some stuff with svg

Browse Source
This commit is contained in:
Alex Yatskov 2014-10-31 11:58:47 +09:00
parent 97d13f5e41
commit 024f38644f
3 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/html/index.html
View File

@ -112,24 +112,24 @@
</div> </div>
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"> <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs> <!-- <defs> -->
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <!-- <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
<stop offset="0%" stop-color="#ffffff"/> <!-- <stop offset="0%" stop-color="#ffffff"/> -->
<stop offset="100%" stop-color="#000000"/> <!-- <stop offset="100%" stop-color="#000000"/> -->
</linearGradient> <!-- </linearGradient> -->
</defs> <!-- </defs> -->
<symbol id="graph"> <!-- <symbol id="graph"> -->
<rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> <!-- <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> -->
<rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> <!-- <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> -->
<rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> <!-- <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> -->
<rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> <!-- <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> -->
<line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> <!-- <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> -->
<text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> <!-- <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> -->
</symbol> <!-- </symbol> -->
<use xlink:href="#graph" x="0" y="0"/> <!-- <use xlink:href="#graph" x="0" y="0"/> -->
</svg> </svg>
<!-- query output --> <!-- query output -->

2
client/scripts/application.js
View File

@ -71,7 +71,7 @@
ctx.maxResults = query.maxResults; ctx.maxResults = query.maxResults;
ctx.grapher = new grapher.Grapher({ ctx.grapher = new grapher.Grapher({
canvas: null, canvas: Snap('#svg'),
columnRange: ctx.searchRange, columnRange: ctx.searchRange,
columnWidth: 150, columnWidth: 150,
useLocalScale: true, useLocalScale: true,

7
client/scripts/grapher.js
View File

@ -111,7 +111,12 @@
function Column(params) { function Column(params) {
this.updateShapes = function() { this.updateShapes = function() {
var bigCircle = this.canvas.circle(150, 150, 100);
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
}; };
this.decimateHints = function(hints, steps, scale) { this.decimateHints = function(hints, steps, scale) {