I am experimenting with the anythingzoomer plugin to magnify svgs. I read the post <a

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Press F12 to see if there are any java errors. Also, don't use jQuery v1.3.2, tr

The large div content is created when clone</code

Magnifying svgs about anythingzoomer HOT 8 CLOSED

css-tricks commented on June 1, 2024

Magnifying svgs

from anythingzoomer.

Comments (8)

Mottie commented on June 1, 2024

Hi @auggywonger!

There are a few issues with the code:

~~There is no "large" div for the "small" element to be cloned into.~~ Sorry, the "large" div is being created.
~~SVG don't expand by using css to change their dimensions. The actual width and height attributes of the SVG need to be changed.~~ The SVG is affected by CSS dimensions!

Here is a working demo

There was a second "small" div being added, so that name was changed to "large".
The initialzed callback is used to adjust the dimensions of the large div SVG dimensions.
I started out by tweaking some of the dimensions, 500px is just a little too big for a JSFiddle demo, but I hope this gives you a better idea.

$(function() {
  var zoom_container = d3.select("body")
    .append("div")
    .attr("id", "zoom")

  var svg = zoom_container.append("div")
    .attr("class", "small")
    .append("svg")
    .attr({
      viewBox: "0 0 50 50",
      width: 50,
      height: 50
    });

  svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "red")

  zoom_container.append("div")
    .attr("class", "large");

  $("#zoom").anythingZoomer({
    edit: true,
    clone: true,
    initialized: function(e, zoomer) {
      zoomer.$large.find('svg').attr({
        width: 100,
        height: 100
      });
    },
  });
});

from anythingzoomer.

auggywonger commented on June 1, 2024

Thanks for the reply!

I can see that the code works on jsfiddle. However, when I copy the code over to my environment, I still have the same issue... This is the code I am running right now.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Time Squared Prototype</title>
        <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="js/jquery.anythingzoomer.js"></script>
        <style type="text/css">

            .hostbar {
              position: absolute;
              left: 0;
            }

            .axis path,
            .axis line {
              fill: none;
              stroke: black;
              shape-rendering: crispEdges;
            }

            .axis text {
              font-family: sans-serif;
              font-size: 11px;
            }

            .small svg {
              width: 100px;
              height: 100px;
            }

            .large svg {
              width: 250px;
              height: 250px;
            }
            .az-wrap {
              margin-top: 50px;
            }

            /* AnythingZoomer */

            .az-wrap,
            .az-small,
            .az-large {
              position: relative;
            }

            .az-wrap-inner {
              display: block;
              margin: 0 auto;
              /* center small & large content */
            }


            /* This wraps the large image and hides it */

            .az-zoom {
              background: #fff;
              border: #333 1px solid;
              position: absolute;
              top: 0;
              left: 0;
              width: 200px;
              height: 200px;
              overflow: hidden;
              z-index: 100;
              display: none;
              -moz-box-shadow: inset 0px 0px 4px #000;
              -webkit-box-shadow: inset 0px 0px 4px #000;
              box-shadow: inset 0px 0px 4px #000;
            }


            /* Class applied to az-mover when large image is windowed */

            .az-windowed {
              overflow: hidden;
              position: absolute;
            }


            /* Class applied to az-mover when large image is fully shown */

            .az-expanded {
              height: auto;
              width: auto;
              position: static;
              overflow: visible;
            }


            /* overlay small area */

            .az-overlay {
              background-color: #000;
              opacity: 0.3;
              filter: alpha(opacity=30);
              z-index: 10;
            }


            /* fade out small content when hovering
                        .az-hovered > * {
                            opacity: 0.5;
                            filter: alpha(opacity=50);
                        }
                        */


            /* edit mode coordinate styling */

            .az-coords {
              display: none;
              /* hidden when expanded */
            }

            .az-zoom .az-coords {
              display: block;
              position: absolute;
              top: 0;
              right: 0;
              background: #000;
              background: rgba(0, 0, 0, 0.5);
              color: #fff;
            }



        </style>
    </head>
    <body>       

        <script type="text/javascript">

          var zoom_container = d3.select("body")
            .append("div")
            .attr("id", "zoom")

          var svg = zoom_container.append("div")
            .attr("class", "small")
            .append("svg")
            .attr({
              viewBox: "0 0 50 50",
              width: 50,
              height: 50
            });

          svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 50)
            .attr("height", 50)
            .attr("fill", "red")

          zoom_container.append("div")
            .attr("class", "large");

          $("#zoom").anythingZoomer({
            edit: true,
            clone: true,
            initialized: function(e, zoomer) {
              zoomer.$large.find('svg').attr({
                width: 100,
                height: 100
              });
            },
          });


        </script>
    </body>
</html>

I am developing my code on my Windows laptop and viewing it with Google chrome. My code is kept in a folder where I installed node.js. I also have a server.js script in the folder. The code from server.js is below:

#!/usr/bin/env node

var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static('./'));

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

The html code is kept in index.html in the folder. To run the code, I run the command node server.js from the folder in the command prompt.

Perhaps I am doing something really obvious and silly that I missed?

from anythingzoomer.

Mottie commented on June 1, 2024

Press F12 to see if there are any javascript errors. Also, don't use jQuery v1.3.2, try something newer like v3.1.0.

from anythingzoomer.

auggywonger commented on June 1, 2024

Thanks! Updating my jquery version did the trick.

I have some follow-up questions:

If I have enabled the clone option, do I need to explicitly create a large div? I thought that a large div would be automatically created.
In http://stackoverflow.com/questions/38754427/using-jquery-anythingzoomer-plugin-to-magnify-svgs , how come the demo code works even though the dimensions of the svg were not specified in javascript?

from anythingzoomer.

Mottie commented on June 1, 2024

The large div ~~content~~ is created when clone is set to true~~, not the div itself~~.

If you mean the original demo, the dimensions are set for the rect:

svg.append("rect")
  .attr("x", 0)
  .attr("y", 100)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "red")

and the viewBox on the svg is set to 500x500.

For the large div, only the svg width and height need to be adjusted. Not the rect dimensions, nor the svg viewBox the css adjusts the size of the svg.

Update: provided the correct info.

from anythingzoomer.

auggywonger commented on June 1, 2024

Hi,

Apologies, I sent the wrong link in my last post. I meant the demo in http://stackoverflow.com/questions/21553145/how-to-achieve-magnifying-square-effect-for-d3-charts .

from anythingzoomer.

Mottie commented on June 1, 2024

Sorry, you're right... I provided incorrect information.

You only need the to set the dimensions of the svg using css. I think the original demo didn't appear to work because the dimensions of the rect were 20x20 and the viewBox was set to 500x500, so there was a very small target to find in a very small result window provided by jsFiddle.

from anythingzoomer.

auggywonger commented on June 1, 2024

Thanks! That clears things up.

from anythingzoomer.

Magnifying svgs about anythingzoomer HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent