ivanvanderbyl / ember-d3 Goto Github PK
View Code? Open in Web Editor NEWLoads the latest D3 packages into Ember CLI so you can use them in your app
License: MIT License
Loads the latest D3 packages into Ember CLI so you can use them in your app
License: MIT License
Hi I tried installing as instructed in the readme but I get this.
Using [email protected]
WARNING: [ember-d3] d3 sub module: "d3-array" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-axis" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-brush" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-chord" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-collection" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-color" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-dispatch" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-drag" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-dsv" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-ease" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-force" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-format" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-geo" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-hierarchy" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-interpolate" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-path" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-polygon" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-quadtree" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-queue" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-random" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-request" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-scale" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-selection" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-shape" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-time" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-time-format" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-timer" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-transition" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-voronoi" is not installed, please reinstall d3
WARNING: [ember-d3] d3 sub module: "d3-zoom" is not installed, please reinstall d3
I have no idea what to do. Any ideas?
Would it be possible to cut a release so that 4f748d4 comes through?
Ember CLI 3.0 seems to require broccoli-merge-trees 3.0.0. This repo is on a very old version.
Trying to understand how to use this as an interface to D3 v4.
Any chance you could create a couple more illustrative examples? In particular trying to figure out how to make a very basic line chart like this example.
https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0
Trying to better understand how to use the d3 api and the ember conventions together. Basically curious to see examples of the kinds primitives that would go into typical charting lib.
Or better yet if you added links to real world projects that use this addon.
I read the circles example but not all clicking yet. ๐
Thanks
There are libraries like DataMaps that expect window.d3
to be defined.
The first thing I tried was
import d3 from 'd3'
window.d3 = d3
but this library doesn't define a module for the rollup. I might be able to do something like
window.d3 = Object.keys(require.entries).
filter((k) => /^d3-/.test(k)).
reduce((d3, moduleName) => {
return Object.assign(d3, require(moduleName))
}, {})
It would be nice if this library made that use-case easier.
We are running into some unexpected behaviour when using ember-d3
from one of our addons and I wanted to clarify what the expected behaviour was.
Let's say we have AddonA
which has a dependency on ember-d3
and an also e.g. d3-geo-projection
. When building AddonA
's dummy app I presume ember-d3
and d3-geo-projection
should both be available for import. And when building AppA
which has a dependency on AddonA
I would also expect ember-d3
and d3-geo-projection
to be available for import.
Currently this line prevents it from working as described when building an addon. Do you know what that guard was trying to catch?
I can put together a PR which fixes it (and potentially also #38 at the same time) if there is no good reason to keep that check (and we can just let _findHost
or its polyfill do the work)...
Do you plan to update the library?
In particular current version of "ember-cli-babel": "^5.1.7", is outdated and causes problems with ember-cli-mirage
Would it be possible to expose the d3 namespace, like in https://github.com/d3/d3#installing, import * as d3 from 'd3'
?
Maybe this is just a non sense in a es6 modules world...
D3@v5 released March 22, 2018: https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50
This add on can use an update?
We currently employ a rather complicated use of recasting to munge the D3 source into something which is digestible by Ember CLI. This means using a build process which isn't reproducible in the same way as the official D3 builds. To fix this, I propose that we change the internals of this addon to use https://github.com/chadhietala/broccoli-rollup instead, with a similar config as the official D3 builds. This should also reduce build time in projects using this addon.
This has D3 pinned at "d3": "4.1.0"
, but D3 is @ 4.13.0. Are there plans to update soon?
Doing so will avoid a couple of noisy warnings - first during install:
warning ember-d3 > [email protected]: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6.
then when building using ember-d3, as the following are both a result of using ember-cli-babel 5.x:
DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: filter-wizard-client -> ember-d3 -> ember-cli-babel
DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from: new NPMDependencyVersionChecker (C:\Users\rmack\Code\TFS\filterwizard\trunk\source\FilterWizardClient\node_modules\ember-d3\node_modules\ember-cli-version-checker\src\npm-dependency-version-checker.js:11:33)
I'm not sure if this is an ember-d3 issue, a d3 issue or a d3-selection issue, but a couple of hours ago d3-selection was upgraded from 1.2.0
to 1.3.0
and since then, when we try to run tests they fail with the error (no such file - see below).. our only d3 dependency is
"ember-d3": "^0.3.4"
.... which then references
"d3": "^4.0.0"
.... which references
"d3-selection": "1.2.0"
d3-selection upgraded to the 1.3.0 release today and it seems this led to the problem.... although it's possible it's a yarn/npm cache issue. I'll update here if I can figure this out locally....
ENOENT: no such file or directory, open '....tmp/source_map_concat-input_base_path-WPEQYDK1.tmp/vendor/d3-selection/d3-selection.js'
The stack trace shows:
Build Canceled: Broccoli Builder ran into an error with Concat
plugin
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at SourceMap.addFile (/ember-app/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /ember-app/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (<anonymous>)
at Concat.<anonymous> (/ember-app/node_modules/broccoli-concat/concat.js:198:24)
at /ember-app/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/ember-app/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/ember-app/node_modules/rsvp/dist/rsvp.js:1039:33)
at SourceMap.end (/ember-app/node_modules/fast-sourcemap-concat/lib/source-map.js:406:10)
- codeFrame: ENOENT: no such file or directory, open '/ember-app/tmp/source_map_concat-input_base_path-WPEQYDK1.tmp/vendor/d3-selection/d3-selection.js'
- errorMessage: Build Canceled: Broccoli Builder ran into an error with `Concat` plugin. ๐ฅ```
I would love it if I could use something like import * as d3 from "d3";
to import all of d3 under one namespace. Is this possible?
As it is, I have a wall of import statements just for a simple graph. Doesn't seem worth it.
Error: Could not find module d3-array
imported from d3-scale
From README.md:
Note: Even though you only add d3-scale, it has a few transitive d3 dependencies. These are added to your project automatically.
My config:
// ember: 2.13.3
// ember-d3: 0.3.4
// d3: 4.9.1
'ember-d3': {
only: ['d3-scale']
}
config/environment.js
is intended to configure you running application, and ember-cli-build.js
is to configure your apps build.
I believe the configuration ember-d3
uses should be via ember-cli-build.js
not config/environment.js
An example of the ember-cli-build.js
would be
module.exports = function(defaults) {
return new EmberApp(defaults, {
'ember-d3': { bundle : true }
});
}
More details in offirgolan/ember-cli-nvd3#8
Under the hood, ember-cli-nvd3
installs ember-nvd3-shim
which installs ember-d3
. Not really sure why this is happening, any suggestions would be appreciated!
It seems like this addon only works with npm 3, where the d3-* modules are directly under the project's node_modules directory.
Just pointing this out, but I don't know what npm versions are supposed to be supported
Given that d3@7 is now an ESM package, is this still necessary if you're using a version of Ember that uses ember-auto-import
?
What's the plan for d3 v4? This may work for bringing in the whole library, but it might be useful for opting into particular submodules of the new repo.
It would be nice to avoid having a bunch of individual shims, like https://github.com/ivanvanderbyl/ember-cli-d3-shape for each submodule -- particularly when you consider the "nested addon" use case (i.e., addon1 requires d3-shape v1
and addon2 requires d3-shape v2
)
cc: @ivanvanderbyl since he's using d3v4, and is well-versed in common usage patterns
cc: @stefanpenner since we're talking about nested addons, and I'm curious as to what he thinks the possible (and recommended) path(s) forward are
this is the error i get when i try to serve my app on localhost:
The Broccoli Plugin: [Funnel] failed with:
Error: ENOENT: no such file or directory, symlink 'C:\Users\nhoss\Documents\coldchainportal\tmp\funnel-input_base_path-YK8K6gr3.tmp\ember-d3\register-version.js' -> 'C:\Users\nhoss\Documents\coldchainportal\tmp\funnel-output_path-60coM5K9.tmp\ember-d3\register-d3-version.js'
at Error (native)
at Object.fs.symlinkSync (fs.js:945:18)
at symlinkWindows (C:\Users\nhoss\Documents\coldchainportal\node_modules\symlink-or-copy\index.js:120:16)
at Function.symlinkOrCopySync [as sync] (C:\Users\nhoss\Documents\coldchainportal\node_modules\symlink-or-copy\index.js:63:5)
at Funnel._copy (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:467:19)
at Funnel.processFile (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:450:8)
at Funnel.applyPatch [as _applyPatch] (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:367:12)
at Funnel. (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:321:10)
at Array.forEach (native)
at Funnel.processFilters (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:320:11)The broccoli plugin was instantiated at:
at Funnel.Plugin (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-plugin\index.js:7:31)
at new Funnel (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-funnel\index.js:58:10)
at rename (C:\Users\nhoss\Documents\coldchainportal\node_modules\broccoli-stew\lib\rename.js:39:10)
at Class.treeForVendor (C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-d3\index.js:98:18)
at Class._treeFor (C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-cli\lib\models\addon.js:362:33)
at Class.treeFor (C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-cli\lib\models\addon.js:330:21)
at C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-cli\lib\broccoli\ember-app.js:522:20
at Array.map (native)
at EmberApp.addonTreesFor (C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-cli\lib\broccoli\ember-app.js:520:30)
at EmberApp._processedVendorTree (C:\Users\nhoss\Documents\coldchainportal\node_modules\ember-cli\lib\broccoli\ember-app.js:975:29)
Hey @ivanvanderbyl!
I see you changed node version on Travis in this commit and it's causing all builds to fail since Object.values()
is only supported by version => 7.
I suggest switching it back to 10 (currently used by the latest ember-cli
version) or at least version 8, which is the minimum Node version supported by ember-d3
(according to the readme). Any thoughts?
https://gist.github.com/biovisualize/2740d97b661aa45da69d081423a90416
Would be nice to have.
Hey there! Add a git tags to repo, plz. Ember-twiddle can works with 0.2.0 version only now
"addons": {
"ember-d3": "0.2.0"
}
oh, sorry, I'm confused it with d3
I am using Ember version 3.1.1 and trying to install ember-d3.
$ ember install ember-d3
npm: Installed ember-d3
Installed addon package.
package.json now has
"ember-d3": "^0.4.4",
$ ember -v
ember-cli: 3.1.2
node: 6.14.0
os: linux x64
However, something seems to still be missing:
$ ember serve
ERROR: Package d3 is not installed, please add it to your project's dependencies
From the documentation it looks like running ember install ember-d3
should have sufficed.
Needs to be completed by @brzpegasus due to permissions.
Hi! I'm going to add zoom behaviour to my plot. I've found many examples like:
svg.call(zoom().on("zoom", function() {debugger;
svg.attr("transform", d3.event.transform);
}))
How can I get this event
using your addon?
Yes, Iโm starting to adopt more recent ES features in D3 modules. [...]
d3
is starting to use ES features, which are not natively supported in browsers like IE11. Since all packages are just run through the amd
transform, this means that unsupported syntax, like arrow functions, makes it into the production build.
I guess this means, that ember-d3
should run the treeForVendor
through ember-cli-babel
with transforms based on the host project's targets.js
?
since d3-selection-multi is not part of the default bundle (see the last paragraph at https://github.com/d3/d3-selection/releases/v1.0.0), how do you set multiple values to style() at once ? In D3 v3, you could pass an object to selection.style().
Getting the below error
Buildingui.writeInfoLine is not a function
TypeError: ui.writeInfoLine is not a function
I've started noticing a bug in the bundled code produced by this addon which causes it to be parsed and loaded evaluated by the browser twice.
I haven't investigated the cause yet.
included()
is being called multiple times and importing the vendor tree multiple times.just upgraded to ember 3.0.0, and ember build
fails with the following error
I've isolated the problem to the Ember-d3 addon. If i remove this addon, it builds successfully. Error log attached:
$ ember build
โ BuildingCannot read property 'writeError' of undefined
Stack Trace and Error Report: /var/folders/6n/msslz_sn7fz1c61dx4td7_gr00013d/T/error.dump.43cbad76335d36c52c908c3ec230c29f.log
cat /var/folders/6n/msslz_sn7fz1c61dx4td7_gr00013d/T/error.dump.43cbad76335d36c52c908c3ec230c29f.log
=================================================================================
ENV Summary:
TIME: Wed Feb 14 2018 15:10:06 GMT-0500 (EST)
TITLE: ember
ARGV:
- /Users/x/.nvm/versions/node/v8.9.4/bin/node
- /usr/local/bin/ember
- build
EXEC_PATH: /Users/x/.nvm/versions/node/v8.9.4/bin/node
TMPDIR: /var/folders/6n/msslz_sn7fz1c61dx4td7_gr00013d/T
SHELL: /bin/bash
PATH:
- /Users/x/.nvm/versions/node/lts/*/bin
- /Users/x/.nvm/versions/node/v8.9.4/bin
- /usr/local/bin
- /usr/bin
- /bin
- /usr/sbin
- /sbin
- /usr/local/bin
PLATFORM: darwin x64
FREEMEM: 494440448
TOTALMEM: 17179869184
UPTIME: 90144
LOADAVG: 3.02685546875,2.62255859375,2.58154296875
CPUS:
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
- Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz - 2800
ENDIANNESS: LE
VERSIONS:
- ares: 1.10.1-DEV
- cldr: 31.0.1
- http_parser: 2.7.0
- icu: 59.1
- modules: 57
- nghttp2: 1.25.0
- node: 8.9.4
- openssl: 1.0.2n
- tz: 2017b
- unicode: 9.0
- uv: 1.15.0
- v8: 6.1.534.50
- zlib: 1.2.11
ERROR Summary:
- broccoliBuilderErrorStack: [undefined]
- codeFrame: [undefined]
- errorMessage: Cannot read property 'writeError' of undefined
- errorType: [undefined]
- location:
- column: [undefined]
- file: [undefined]
- line: [undefined]
- message: Cannot read property 'writeError' of undefined
- name: TypeError
- nodeAnnotation: [undefined]
- nodeName: [undefined]
- originalErrorMessage: [undefined]
- stack: TypeError: Cannot read property 'writeError' of undefined
at dependenciesForPackage (/Users/x/cinch/advisor/node_modules/ember-d3/index.js:45:17)
at Class.allD3Modules (/Users/x/cinch/advisor/node_modules/ember-d3/index.js:28:45)
at Class.included (/Users/x/cinch/advisor/node_modules/ember-d3/index.js:113:48)
at Class.superWrapper [as included] (/Users/x/cinch/advisor/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:34:20)
at project.addons.project.addons.filter.addon (/Users/x/cinch/advisor/node_modules/ember-cli/lib/broccoli/ember-app.js:538:17)
at Array.filter (<anonymous>)
at EmberApp._notifyAddonIncluded (/Users/x/cinch/advisor/node_modules/ember-cli/lib/broccoli/ember-app.js:535:47)
at new EmberApp (/Users/x/cinch/advisor/node_modules/ember-cli/lib/broccoli/ember-app.js:164:10)
at module.exports (/Users/x/cinch/advisor/ember-cli-build.js:8:13)
at Builder.setupBroccoliBuilder (/Users/x/cinch/advisor/node_modules/ember-cli/lib/models/builder.js:51:19)
Right now if I want to use the selection.transition
function I have to write something like:
import { transition } from 'd3-transition';
even if I'm not directly using the transition function. JShint complains that transition is defined, but never used, so I then have to wrap the above code in /*jshint ignore:start*/.../*jshint ignore:end*/
statements. Is there a better way of doing this with the new modularized approach?
The latest version, v0.5.1 does not work on any app using a version of ember-cli lower than v3.2.0, due to the use of PackageInfoCache
which was added in v3.2.0.
Running any ember
command results in the following error:
Cannot read property 'entries' of undefined
Also, if you are using a version of node lower than v7.0.0, you'll need to upgrade due to Object.values
not being present.
Running any ember
command results in the following error:
Object.values is not a function
I'm not sure anything specifically needs to be done with this, I just wanted to file this so anyone running into the same issue knows why.
Commit 07f7db7 changed index.js to use path.join() in a way that breaks this package for Windows users.
A fix is documented in this thread - it looks like just fixing line 99 may be sufficient.
Hi, I was just wondering how I should create D3-based components with this add on.
I am assuming something like this:
{{awesome-d3-widget data=model.data}}
Where my component has something like this:
import Ember from 'ember';
import d3 from 'd3';
export default Ember.Component.extend({
tagName="svg",
classNames=["'awesome-d3-widget"],
data: null
//HOW DO I GET IT STARTED?
});
How would I recreate something like this?
When I used the d3-drag/drag
function in conjunction with d3-selection/event
it would appear all events are not getting through to d3. I had a suspicion that the Ember component was swallowing up these events so I changed over to a tagless component figuring I'd have greater control of the events on the SVG/Canvas element. Sadly that didn't seem to help. Any ideas?
Code here: https://github.com/ksnyde/d3-fun/blob/master/app/components/circle-dragging.js#L79-L84
P.S. I have really enjoyed using this addon to get started with d3 in Ember. Great work. I actually will likely send you a PR which just adds a few more examples of charts you can build with this addon (if you're amendable). I think it will make your work more approachable to have the dummy app have a variety of examples working for people to engage with
From what I've gathered, this seems to be the most mature and actively maintained d3 addon. It is not appearing in the charts category of emberobserver.com:
https://emberobserver.com/categories/charts
To me, including it there will increase visibility.
I can also open this in https://github.com/emberobserver/client if needed
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
(relates to PR #27)
I get the run time error as below.
loader.js:247 Uncaught Error: Could not find module ember-d3
imported from hgnapp/mixins/chart
at missingModule (loader.js:247)
at findModule (loader.js:258)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)
at requireModule (loader.js:24)
at Class._extractDefaultExport (resolver.js:382)
at Class.resolveOther (resolver.js:79)
at Class.superWrapper [as resolveOther] (ember.debug.js:23163)
Specifically about examples showing to import from d3 (or sub-libraries)
Docs/behavior that needs correction: https://github.com/ivanvanderbyl/ember-d3#global-d3
(The whole section should probably be removed)
Folks are literally not allowed to import things not in their package.jsons
No modern tool allows it. Pnpm, webpack, vite, esbuild, swc, etc
So folks need to add d3 (or the sub libraries) to package.json
It's an accident of older npm and yarn being bad at package management that it ever worked as described in the readme.
That said, #107 brings up a good point.
Folks can use d3 directly in their projects without ember-d3
So maybe this repo should be archived?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.