d3 liquidfilledguage does not work with d3 version 4 - d3.js

specifically, it fails on this code:
waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')')
.transition()
.duration(config.waveRiseTime)
.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')')
.each("start", function(){wave.attr('transform','translate(1,0)'); });
Where waveGroup results from a call to d3.select and is a d3 object.
the fail occurs on the call to ".each" which has apparently changed in d3 version 4. It nolonger accepts a string as the first parameter.
The error is "callback.call is not a function"
Simply removing the first parameter causes errors elsewhere.
Is their a version of liquidfilledguages what works with d3 version 4?

I am assuming you are referring to this
Use this change log to migrate from v3 to v4.
change .each("start", ... ) to .on("start",....)
Along with that you need to do all the migration changes.

Related

Map().set() does not add element in Collection, using NativeScript

I recently have had a problem when coding using NativeScript.
I tried using Map() object as a Collection, but its set() method seems not to work.
I use the following snippet :
var r = new Map();
r.set("one", "two");
console.dir(r);
It however outputs an empty Map(), and I do not know why...
For your convenience, here is a link to a NativeScript PlayGround: https://play.nativescript.org/?template=play-ng&id=evhIxX&v=2
I inserted the snippet inside home.components.ts
Thanks alot!
LMy
Actually it works, if you try r.get("one") then you will see two in console.
May be console.dir does not handle Map as expected. You may report that in the GitHub project.

How to pass props to Actions.replace react-native-router-flux

Version
Tell us which versions you are using:
react-native-router-flux v4.0.0-beta.28
react-native v0.52.2
Tried the following...
Actions.replace({ key: tabKey, props: tabPage });
Actions[key]({ type: ActionConst.REPLACE, tabPage: tabPage })
and several variations there of
I would recommend to try the most recent version - but if that's not possible, move to the last beta that was still using react-navigation 1.5 - there is a branch for that version only now (4.0.0-beta) and then use the execute method.
Actions.execute('replace', tabKey, { tabPage });
And I believe the two examples you showed are not correct too, but I might be wrong, the number of changes during the work in this beta version was huge, but according to the code/API docs, this is the way you were supposed to be doing it:
Actions.replace(tabKey, { tabPage });
// or
Actions[tabKey]({ tabPage }); // and use type={ActionsConst.REPLACE} on your `Scene`
you most use Actions.replace('tab name'); and this work

Typescript Type definition for d3 sankey

I have some javascript code which uses d3 sankey plugin for creating a chart. In my new project, I need to reuse the same code, but the new project is in typescript. I am looking for a DefinitelyTyped file for the plugin. I browsed through https://github.com/DefinitelyTyped/DefinitelyTyped, but couldn't find it.
Is there any other location where I can get this file from?
Sankey plugin link: https://github.com/d3/d3-sankey
Also, without a d.ts file for this plugin, is there a way to access it through typescript?
The code in d3 plugin looks something like this:
d3.sankey = function () {
// Rest of the code goes here
}
The way I use it in javascript is as below:
d3.sankey().nodeWidth(30).size([100,100]);
Would appreciate any help or guidance.
Thanks!
As a heads-up, I have just submitted a Pull Request #16051 to DefinitelyTyped which contains TS definitions for d3-sankey.
Once they are merged, they will be published as per standard process to npm/#types. I.e. npm install --save-dev #types/d3-sankey will do.
IMPORTANT: When I wrote them up, I noticed that the current API documentation in the d3-sankey repo appears to be in some need of rectification (e.g. missing methods, mentioning of accessor functions, which are not used in the code base)
When I have a second, I will file an issue there/submit a PR.
UPDATE (2017-05-01):
The "official" TypeScript definitions for d3-sankey are now available (see npm #types/d3-sankey). Simply use them with npm as indicated above.
The PR to update the actual API documentation of d3-sankey to reflect the source code is still awaiting a merge here.
You need to expand the definition of the d3 type to include the sankey() method and the methods it accepts.
At the absolute minimum, you need to extend the d3 module with a declaration file to make clear that d3 has been extended with the d3-sankey module. You do so by creating a definition file that you place within the #types directly with the following contents:
declare module 'd3' {
export function sankey(...args[]) : any;
}
This tells TS that there is a d3 module, and that it exports the function listed. If the d3 module already exists, it extends that module.
So you can then import the d3 service and use it:
import dd3 = require('d3');
dd3.sankey();
If you want to expand on the type file, you instead write the definition file as so:
declare module 'd3' {
interface ISankey {
nodeWidth() : number;
nodeWidth(width : number|{(arg: number) : number}) : void;
// Add Other d3.sankey Methods Here
}
export function sankey() : ISankey;
}

TypeScript and d3 domain type

I have a problem, when I want to use domain.
So, I try to use next part of my code
var x = d3.time.scale()
.domain([new Date('2016-06-10'), new Date('2016-06-25')])
.rangeRound([0, 1000]);
And I get error about error types for domain...
Argument of type 'Scale' is not assignable to parameter of type 'Scale'.
Types of property 'domain' are incompatible.
Type '{ (): Date[]; (dates: number[]): Scale; (dates: Date[]): Scale; }' is not assignable to type '{ (): number[]; (values: number[]): Scale; }'.
Type 'Date[]' is not assignable to type 'number[]'.
Type 'Date' is not assignable to type 'number'.
But If we look d3 typings
domain(): Date[];
domain(dates: number[]): Scale<Range, Output>;
domain(dates: Date[]): Scale<Range, Output>;
domain can take Date array!
If we disable types, then all works fine.
And I have similar problem with another part of my code:
var drag = d3.behavior.drag()
.on('drag', function (d) {
d3.event.sourceEvent.stopPropagation();
})
.on('dragstart', function () {
//
});
I get error about:
Property 'sourceEvent' does not exist on type 'Event | BaseEvent'.
But If we look in types
export var event: Event | BaseEvent;
and
interface BaseEvent {
type: string;
sourceEvent?: Event;
}
I use typings:
"d3": "registry:dt/d3#0.0.0+20160614091820"
and awesome-typescript-loader for webpack
So, what's wrong with me?
Is your intent to use D3 v4 or D3 v3?
The code snippets you posted seem to imply D3 v3. In line with what Jake said.
There are current D3 version 4 definitions available, assuming you are using TypeScript 2.
The repo he referenced has been completely migrated to DefintitelyTyped (currently types-2.0 branch), we had mostly used it for collaborative development, while the ecosystem was still in flux...
Now to get the definitions by module simply use
npm install #types/d3-selection --save (or --save-dev if you do not publish for third party use)
As of yesterday, npm install #types/d3 --save will also get you definitions corresponding to the Standard D3 Bundle.
There was some technical debt in the publication process from DefinitelyTyped to npm #types as we did not want to break libraries that still needed the legacy D3 v3.5 definitions. This is now resolved.
Once you install the relevant definitions, you simple use TypeScript/ES6 import statements for the corresponding D3 modules (or the d3 standard bundle).
import { select, Selection } from 'd3-selection';
import * as d3Drag from 'd3-drag';
Or similar. You can also create your own TypeScript module to bundle as subset of the modules, if it makes it more convenient for you see my answer to https://stackoverflow.com/questions/40314024/typescript-d3-v4-import-not-working
Things are slightly different, if you want to use the definitions in a vanilla script with a global
If that is your use case let me know, and I can add more info.
This happened to me yesterday using Typescript 2.0 and the latest #types/d3-drag.
I think its just an issue with the typings, check here for updates: https://github.com/tomwanzek/d3-v4-definitelytyped/issues
My crud band-aid:
let drag:any = d3.behavior.drag()...

Cache won't work in Appcelerator

Titanium SDK version: 1.6.
iPhone SDK version: 4.2
I am trying out the cache snippet found on the Appcelerator forum but I get an error: [ERROR] Script Error = Can't find variable: utils at cache.js (line 9).
I put this one (http://pastie.org/1541768) in a file called cache.js and implemented the code from this one (http://pastie.org/pastes/1541787) in the calling script, but I get the error.
What is wrong? I copied the code exactly.
Your problems is whilst the first pastie defines utils.httpcache. The variable utils is not defined outside of this function closure (because it is not defined anywhere in global namespace). As below shows.
(function() {
utils.httpcache = {
};
})();
To make it all work in this instance add the following code to the top of your cache.js file.
var utils = {};
This declares the utils variable in global namespace. Then when the function closure is executed below it will add utils.httpcache to the utils object.
The problem is actually not specific to Appcelerator and is just a simple JavaScript bug. Checkout Douglas Crockfords book, JavaScript the Good Parts. Reading it will literally make you a more awesome JavaScript developer.
You can't use utils.httpcache.getFromCache(url) until you add this to your code:
var utils = {};
That's because how the author created his function, it's called JavaScript module pattern and it's generally used to structure the code.
I seem to lose this value "value.httpCacheExpire = expireTime;" when the code does the "Titanium.App.Properties.setString(key,JSON.stringify(value));" so when I get it back using the getString method, there's no longer the "value.httpCacheExpire.
Anyone else have this issue? Am I missing something to get this working?

Resources