I am trying to resize a geo svg in an xml file and am failing. I'v been trying to adjust the viewBox and height/width but cannot get it to work... I am basically trying to enlarge the svg for use with Kartograph.js. I got the FRA.svg file from KArtograph...
context path { fill: #eee; stroke: #bbb; } ]]>
Any help would be great, thanks!
I hope you still need the answer.
I had the same problem resizing my world.svg on resizing the window. Basically the API of Kartograph.js is very uncomplete.
Just oversee the source, there you'll find a resize-function.
In my case I came up with the following (including a timeout to not resizing the map continuously:
var worldMap = kartograph.map('#map');
worldMap.loadMap(worldSvg, function (map) {
//some code
});
$(window).on('resize', function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
worldMap.resize($('#map').width(),$('#map').height());
}
}
Works great for me.
Related
First plugin with XD and i can't seem to create a instance of class Color.
Their documentation doesn't show any examples and any that i find in other examples just shows new Color() and that i don't have to perform any require.
https://adobexdplatform.com/plugin-docs/reference/Color.html
Plugin ReferenceError: Color is not defined
at exportToBmpFunction (C:\Users\<useR>\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop\BMP_Export\main.js:21:21)
What am i doing wrong?
async function exportToBmpFunction(selection) {
if (selection.items.length == 0) {
return;
}
// Generate PNG rendition of the selected node
let application = require("application");
let scenegraph = require("scenegraph");
let fs = require("uxp").storage.localFileSystem;
let shape = selection.items[0];
let file = await fs.getFileForSaving('what.png', { types: ["png"] });
let renditions = [{
node: shape,
outputFile: file,
type: application.RenditionType.PNG,
scale: 1,
background: new Color('#FF00CD', 1)
}];
application.createRenditions(renditions).then(function(results) {
// ...do something with outputFiles on disk...
});
}
module.exports = {
commands: {
exportToBmp: exportToBmpFunction
}
};
Turns out after digging through other classes in the same 'namespace' that their documentation is just flat out wrong in some places. This is what it should be.
const Color = require("scenegraph").Color;
let color = new Color('#FF00CD');
This happens to be in direct contradiction to examples of use of Color in the docs.
Yay for freehanding code!
Brush extent needs to be changed only from a dropdown as shown here: https://jsfiddle.net/dani2011/67jopfj8/3/
Need to disable brush extending by:
1) Extending an existing brush using the handles/resize-area of the brush
Gray circles are the handels:
2) Dragging a new brush by clicking on the brush background, where the
haircross cursor appears.
JavaScript file
Removed the handles of the brush:
timeSlider.on('preRedraw',function (chart)
{
var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();})
If using css instead:
#bitrate-timeSlider-chart g.resize {
display:none;
visibility:hidden;
Now it looks like this:
.
The rect and the path elements inside "resize e","resize w" were removed:
However,the "resize e", "resize w" for extanding the brush still exist:
g.resize.e and g.resize.w dimesions are 0*0:
Furthurmore,after deleting "resize e","resize w" in the "developer tools/elements" in chrome,they reappear after moving the brush.
Tried to remove the resize-area in brushstart,brush,brushend:
timeSlider.on('renderlet', function (chart) {
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);
var timesliderSVG4 =
brushg.on("brushstart", function () {resizeg.exit().remove()}).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })
dc.js file
Tried to change setHandlePaths,resizeHandlePath:
1)
Remarked the _chart.setHandlePaths(gBrush):
_chart.renderBrush = function (g) {....
// _chart.setHandlePaths(gBrush);
...}
2) Changed _chart.setHandlePaths = function (gBrush) for example by removing the gbrush.path:
// gBrush.selectAll('.resize path').exit().remove();
3) Remarked/changed _chart.resizeHandlePath = function (d) {...}.
d3.js file
1) Remarked/changed resize such as:
mode: "move" //mode: "resize" ,
var resize = g.selectAll(".resize").data(resizes[0], d3_identity);
Using resizes[0] disable the brush rendering on the background but still can re-extend the existing brush
2) Remarked/changed d3_svg_brushResizes
3) In d3.svg.brush = function():
a) Added .style("display","none"):
background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("display", "none").style("cursor", "none");
b) background.exit().remove();
The cursor now is "pointer" instead of "haircross" extending the brush to a full width
c) d3_svg_brushCursor disabled makes the whole brush disappear
4) Changed the pointer-events as specified here: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
5) console.log in different places to track the different brush events:
function d3_event_dragSuppress(node) {
console.log("here2 ");
}
if (d3_event_dragSelect) {
console.log("here3 d3_event_dragSelect");
...
}
return function (suppressClick) {
console.log("suppressClick1");
...
var off = function () {
console.log("suppressClick2");
...
w.on(click, function () {
console.log("suppressClick3")
...
function d3_mousePoint(container, e) {
console.log("d3_mousePoint1")
...
if (svg.createSVGPoint) {
console.log("createSVGPoint");
...
if (window.scrollX || window.scrollY) {
console.log("createSVGPoint1");
svg = d3.select("body").append("svg").style({
...
function dragstart(id, position, subject, move, end) {
console.log("dragstart")
...
function moved() {
console.log("moved ");
console.log("transition1");
...
if (d3.event.changedTouches) {
console.log("brushstart1");
...
} else {
console.log("brushstart2");
..
if (dragging) {
console.log("dragging4");
....
if (d3.event.keyCode == 32) {
if (!dragging) {
console.log("notdragging1");
...
function brushmove() {
console.log("brushmove");
...
if (!dragging) {
console.log("brushmove!dragging");
if (d3.event.altKey) {
console.log("brushmove!dragging1");
...
if (resizingX && move1(point, x, 0)) {
console.log("resizeXMove1");
...
if (resizingY && move1(point, y, 1)) {
console.log("resizeYMove1");
...
if (moved) {
console.log("moved");
...
}
function move1(point, scale, i) {
if (dragging) {
console.log("dragging1");
...
if (dragging) {
console.log("dragging2");
...
} else {
console.log("dragging10");
...
if (extent[0] != min || extent[1] != max) {
console.log("dragging11");
if (i) console.log("dragging12"); yExtentDomain = null;
console.log("dragging13");
function brushend() {
console.log("brushend");
...
The two changes that seemed to get closest to the needed result are in d3.js:
1) Using resizes[0] disables the brush rendering on the background but still can re-extend the existing brush
var resize = g.selectAll(".resize").data(resizes[0], d3_identity);
2) Removing the brush's background changes the cursor to "pointer" instead of "haircross",extending the brush to a full width only when clicking on the graph
`background.exit().remove();`
Any help would be very appreciated!
This is from the accepted answer in Disable d3 brush resize, as suggested by #altocumulus. I didn't see a response from #Dani on this idea in particular, but thought I'd go ahead and try it, since I've seen other people try it in the past. (Probably on the dc.js users group.)
It looks a little twitchy, because d3.js will draw the brush at the new extent, and then a moment later we reset the extent to what we want, but functionally it seems to do what we want.
In dc.js the function that handles brush "rounding" is coordinateGridMixin.extendBrush:
_chart.extendBrush = function () {
var extent = _brush.extent();
if (_chart.round()) {
extent[0] = extent.map(_chart.round())[0];
extent[1] = extent.map(_chart.round())[1];
_g.select('.brush')
.call(_brush.extent(extent));
}
return extent;
};
Notice that it's following the same pattern as Lars' answer. Well, this is sort of like rounding, right? Let's override it.
First, let's store the current number of hours when it's set through the dropdown:
var graphSpan;
function addHours(amountHours) {
graphSpan = amountHours;
// ...
Next let's override coordinateGridMixin.extendBrush:
timeSlider.extendBrush = function() {
var extent = timeSlider.brush().extent();
if(graphSpan) {
extent[1] = moment(extent[0]).add(graphSpan, 'hours');
}
return extent;
}
We just replace the function. If we needed to reuse the old implementation in our function, we could use dc.override.
If graphSpan has been set, we add that amount to the beginning to get the end. If it's not set, we allow the user to specify the brush width - you'd need to default the graphSpan and the select widget if you wanted that part to work automatically.
Well, let's admit it: it's very twitchy, but it works:
EDIT: Got rid of the twitch! The problem was that dc.js was setting the brush extent asynchronously after a little while (in response to the filter event). If we also set it during extentBrush then it never shows the wrong extent:
timeSlider.extendBrush = function() {
var extent = timeSlider.brush().extent();
if(graphSpan) {
extent[1] = moment(extent[0]).add(graphSpan, 'hours');
timeSlider.brush().extent(extent);
}
return extent;
}
https://jsfiddle.net/gordonwoodhull/xdo05chk/1/
What worked for me:
in d3:
disable resize handles
d3.selectAll('.brush>.handle').remove();
disable crosshair
d3.selectAll('.brush>.overlay').remove();
or
in css:
disable resize handles -
.handle {
pointer-events: none;
}
disable crosshair -
.overlay {
pointer-events: none;
}
I am currently creating a floormap using HTML and Canvas.
Here is the test url : http://test.fastcoding.jp/clem/floormap/
Map image for each zoom level is cut into pieces (with PHP), and map is rebuilt using HTML divs with different transform: translate() positions.
On mouse wheel events, a scale factor is applied to each divs, and once the scale become 1 the next zoom level is shown.
On mouse drag, translate values are updated.
So now here is the problem.
Everything works fine on Chrome, Safari, but on IE dragging actions are really laggy (a bit laggy in Firefox as well).
Here is my map refresh function that is called on drag :
app.refresh_map = function() {
var curr_map = app.maps[app.curr_zoom];
var maxI = curr_map.tiles.length-1;
var maxJ = curr_map.tiles[0].length-1;
var scale = app.zooms[app.curr_zoom][app.curr_scale];
for(var i=0; i<=maxI; i++) {
for(var j=0; j<=maxJ; j++) {
var curr_tile = curr_map.tiles[i][j];
var new_tile = {
x: curr_tile.x*scale, y: curr_tile.y*scale,
width: curr_tile.width, height: curr_tile.height
};
var selector = ".fm-tiles[data-map='"+app.mapID+"'] .fm-tile[data-zoom='"+app.curr_zoom+"'][data-tile='"+i+"-"+j+"']";
if ( app.in_screen(new_tile) ) {
if( $(selector).length==0 ) $tiles.append('<div class="fm-tile" data-zoom="'+app.curr_zoom+'" data-tile="'+i+"-"+j+'"></div>');
var $tile = $(selector);
var x = app.pos.x + new_tile.x;
var y = app.pos.y + new_tile.y;
x = parseFloat(x.toFixed(2));
y = parseFloat(y.toFixed(2));
if(!$tile.hasClass("loaded")) {
$tile.css("background", "url('api/results/"+mapID+"/"+app.curr_zoom+"/"+curr_tile.src+"') no-repeat left top");
$tile.css("background-size", "100% 100%");
$tile.addClass("loaded");
$tile.css({
"width": curr_tile.width+"px",
"height": curr_tile.height+"px"
});
}
if(app.browser=="ie") {
$tile.css({
"transform-origin": "0% 0%",
"-ms-transform": "translate("+x+"px,"+y+"px) scale("+scale+","+scale+")"
});
}
else {
$tile.css({
"transform-origin": "0px 0px 0px",
"-webkit-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
"-moz-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
"transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)"
});
}
if(!$tile.is(":visible")) {
$tile.show().addClass("shown");
}
}
else {
if($(selector).length!=0){
$(selector).hide();
}
}
}
}
$(".fm-tiles[data-map='"+app.mapID+"'] .fm-tile:not([data-zoom='"+app.curr_zoom+"'])").hide();
}
I know it is possible to make it smooth because there is this map which work perfectly on any browser : http://okayamaeki-sc.jp/floorguide/#/sunste2f
I looked a bit the code but it is ugglyfied so a bit hard to understand.
I know that it uses different transform and transform-origin according to the browser and that it is using a sort of easing, but I don't know if it's the reason why it is so smooth.
Does anyone have any clue ?
Thanks.
I am working on a responsive utility component, to make a few D3 components responsive in react. However I deep SVG knowledge escapes me. I have based my responsive utility on this issue on github. However it isn't quite working, All it does is render the a chart, but not at the width or height passed in but rather at a really small width and height. It also doesn't resize.
import React from 'react';
class Responsive extends React.Component{
constructor () {
super();
this.state = {
size: {
w: 0,
h: 0
}
}
}
componentDidMount () {
window.addEventListener('resize', this.fitToParentSize.bind(this));
this.fitToParentSize();
}
componentWillReceiveProps () {
this.fitToParentSize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.fitToParentSize.bind(this));
}
fitToParentSize () {
let elem = this.findDOMNode(this);
let w = elem.parentNode.offsetWidth;
let h = elem.parentNode.offsetHeight;
let currentSize = this.state.size;
if (w !== currentSize.w || h !== currentSize.h) {
this.setState({
size: {
w: w,
h: h
}
});
}
}
render () {
let {width, height} = this.props;
width = this.state.size.w || 100;
height = this.state.size.h || 100;
var Charts = React.cloneElement(this.props.children, { width, height});
return Charts;
}
};
export default Responsive;
Responsive width={400} height={500}>
<XYAxis data={data3Check}
xDataKey='x'
yDataKey='y'
grid={true}
gridLines={'solid'}>
<AreaChart dataKey='a'/>
<LineChart dataKey='l' pointColor="#ffc952" pointBorderColor='#34314c'/>
</XYAxis>
</Responsive>
disclaimer: I'm the author of vx a low-level react+d3 library full of visualization components.
You could use #vx/responsive or create your own higher-order component based on withParentSize() or withWindowSize() depending on what sizing you want to respond to (I've found most situations require withParentSize()).
The gist is you create a higher-order component that takes in your chart component and it attaches/removes event listeners for when the window resizes with a debounce time of 300ms by default (you can override this with a prop) and stores the dimensions in its state. The new parent dimensions will get passed in as props to your chart as parentWidth, parentHeight or screenWidth, screenHeight and you can set your svg's width and height attributes from there or calculate your chart dimensions based on those values.
Usage:
// MyChart.js
import { withParentSize } from '#vx/responsive';
function MyChart({ parentWidth, parentHeight }) {
return (
<svg width={parentWidth} height={parentHeight}>
{/* stuff */}
</svg>
);
}
export default withParentSize(MyChart);
I am working on a project for my programming class. I'd like to essentially have a canvas with a background element (say a room.jpg) and then maybe three interactive objects in the room (lamp.jpg, couch.jpg, desk.jpg). I'd like for it to be that if you hover over the lamp a small box or text pops out, giving you some information. Or maybe have it so if you click an image, the same concept happens. You know, something interactive with the objects in the canvas. Again, I'm new to canvas but we have to use it in our assignment. My current code is:
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var sources = {
room: 'room.jpg',
title: 'title.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.room, 0,0);
context.drawImage(images.title, 0,0);
});
}
But from what I understand, it makes the two jpegs a "permanent" canvas element (unable to be messed with). I had been trying to get it so that when I clicked I'd go from the title.jpg to the room.jpg but I've since given up. Essentially, all I want now is just to have the room.jpg appear when the page is first loaded, and have three other png objects on top (as objects in the room). Are these able to be interacted with, or do I have to put the images into the canvas in another way? Thanks for all your help and your patience!
// --- Image Loader ----
var images = {};
var loadedImages = 0;
var pictures = {
room: 'room.jpg',
title: 'title.jpg'
lamp1: 'lampoff.jpg'
lamp2: 'lampon.jpg'
};
function loadImages(sources, callback) {
var numImages = 0;
for(var src in sources)numImages++;
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
// --- Mouse Down Functionality ----
$('#canvas').addEventListener('mouseDown', function(e){
if(e.clientX){
var rect = this.getBoundingClientRect();
if(rect) clickCanvas(e.clientX - rect.left, e.clientY - rect.top)
else clickCanvas(e.clientX - this.offsetLeft, e.clientY - this.offsetTop);
}else if(e.offsetX) clickCanvas(e.offsetX, e.offsetY);
else if(e.layerX) clickCanvas(e.layerX, e.layerY);
else console.warn("Couldn't Determine Mouse Coordinates");
})
var lampOn;
function drawCanvas(showLamp){
lampOn = showLamp;
canvas.width = canvas.width //clears canvas
context.drawImage(images.room, 0,0);
context.drawImage(images.title, 0,0);
if(lampOn){
context.drawImage(images.lamp2, 100,100);
}else{
context.drawImage(images.lamp1, 100,100);
}
}
function clickCanvas(x,y){
console.log('clicked canvas at:',x,y)
if(clickedLamp){
drawCanvas(!lampOn)
}
}
loadImages(pictures, function(images) {
drawCanvas(false)
});
Make sure to replace "clickedLamp" and "#canvas"! The idea here is that you redraw the same canvas, using the same function. Everytime you modify any of it, you rerender ALL of it. See if you can get this example working, it will help clarify alot. If you don't understand something comment