ming-codes / ember-cli-d3 Goto Github PK

The plugin collection is currently failing. The code seems to look for named-amd/main.js in each dir in d3-plugins-dist but these files aren't present, so the build fails.

Is there an install step that I'm missing?

When running in production mode this here unfortunetly

breaks the app.

See also emberjs#15206

Ember.Object.extend({
  brush: Ember.computed(function () {
    return d3.svg.brush();
  })
});

In the event above, d3.svg.brush produces events that cannot be cleanly handled.

When CP is recomputed, the previous brush is discarded with no chance for proper cleanup.

There needs to be more demo visuals in the gallery. Some of them can be ported from d3js.org.

• Sine Wave This could be a great example to demo mixed rendering

Running on the v1.1.7 I am encountering these 2 deprecation warnings:

DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: client -> ember-cli-d3 -> ember-cli-babel
DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: client -> ember-cli-d3 -> ember-getowner-polyfill -> ember-cli-babel

These warnings are also triggering:

WARNING: You have not included `ember-cli-shims` in your project's `bower.json` or `package.json`. This only works if you provide an alternative yourself and unset `app.vendorFiles['app-shims.js']`.

See this comment in this issue by @rwjblue

We discussed this at the latest ember-cli meeting, and instead of removing directly we need to modify the conditional to only warn if the app does not depend on ember-cli-shims and it has at least one addon that depends on ember-cli-babel@5.

This will remove the warning for folks that do not need it ([email protected]+ does inline shim transpilation), and continue to be helpful for folks that do rely on the shims...

• Introduction
• Getting Started
  • Install
  • Configuration
• Concepts and Principles
• Core Classes
  • data-visual Component
  • svg Context
  • d3-support Mixin
  • join Util
  • dataExpr parameter
  • cssExpr parameter
  • options parameter
  • graph Test Helper
• Patterns
  • Interactivity
• Naming Convention

I have installed using ember install ember-cli-d3 and run using ember serve having added the config to app.js

//app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    d3: {
        plugins: {
            'mbostock': [ 'sankey' ],
            'emeeks': [ 'adjacency-matrix' ]
        }
    },
    Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

I get the following error:

PS C:\Projects\graphdemo> ember serve
version: 2.4.2
Livereload server on http://localhost:49156
Serving on http://localhost:4200/
The Broccoli Plugin: [Funnel] failed with:
Error: ENOENT: no such file or directory, symlink 'C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\d3-plugi
ns-dist\dist\larskotthoff\chernoff\named-amd\main.js' -> 'C:\Projects\graphdemo\tmp\funnel-output_path-9Yk6ihj4.tmp\d3-p
lugins-dist\larskotthoff\chernoff\named-amd\main.js'
    at Error (native)
    at Object.fs.symlinkSync (fs.js:897:18)
    at symlinkWindows (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\node_modules\symlink
-or-copy\index.js:90:16)
    at Function.symlinkOrCopySync [as sync] (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funne
l\node_modules\symlink-or-copy\index.js:56:5)
    at Funnel._copy (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:398:19)
    at Funnel.processFile (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:381:8)
    at Funnel.applyPatch [as _applyPatch] (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\
index.js:298:12)
    at Funnel.<anonymous> (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:250:10)

    at Array.forEach (native)
    at Funnel.processFilters (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:249:
9)

The broccoli plugin was instantiated at:
    at Funnel.Plugin (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\node_modules\broccoli
-plugin\index.js:7:31)
    at new Funnel (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:44:10)
    at Funnel (C:\Projects\graphdemo\node_modules\ember-cli-d3\node_modules\broccoli-funnel\index.js:42:43)
    at Class.module.exports.treeForVendor (C:\Projects\graphdemo\node_modules\ember-cli-d3\index.js:36:43)
    at Class._treeFor (C:\Projects\graphdemo\node_modules\ember-cli\lib\models\addon.js:322:31)
    at Class.treeFor (C:\Projects\graphdemo\node_modules\ember-cli\lib\models\addon.js:290:19)
    at C:\Projects\graphdemo\node_modules\ember-cli\lib\broccoli\ember-app.js:446:20
    at Array.map (native)
    at EmberApp.addonTreesFor (C:\Projects\graphdemo\node_modules\ember-cli\lib\broccoli\ember-app.js:444:30)
    at EmberApp._processedVendorTree (C:\Projects\graphdemo\node_modules\ember-cli\lib\broccoli\ember-app.js:895:29)

Just upgraded to the latest version of this library... It dies on build now:

Cannot read property 'plugins' of undefined
TypeError: Cannot read property 'plugins' of undefined
  at ... /node_modules/ember-cli-d3/index.js:55:32

Should guard against this.

github pages doesn't work properly without using hash navigation.

https://github.com/lightblade/ember-cli-d3/blob/master/tests/dummy/config/environment.js#L42-L44

In "production", you'll want something like

ENV.locationType = 'hash';
ENV.baseURL = '/ember-cli-d3';

Should be "version": "1.1.7", but is "version": "1.1.6" instead. Causes issues when installing it via npm.

Similarly, any non-svg stage should be separate addon

data-generator test helper will be removed in the next major release.

Please use ember-cli-mirage or faker.js instead

hi, I'm a d3 noob and need help just getting started. I want to get started just with a simple shape like a line or circle, I'm having trouble wrapping my head around that because of my lack of d3 experience.

tests/test-helpers/graph.js
tests/test-helpers/data-generator.js

Should be exposed as part of the addon

Hi! I'm super impressed by this - I love ember and D3. I'm just getting started with a project that will make use of D3 (interactive bezier curves, dynamic axes... a music app, with beat grids and automation curves). I looked through your docs and examples - I'm excited to use your addon!

I was trying to install ember-cli-d3 and got the following error:

my project versions:

i suspect this is just a missing lodash dependency - will try to add to my local and see if that resovles, then report back here

thank you for your awesome work!

pangratz/ember-cli-htmlbars-inline-precompile

Sounds like a great idea. No solid idea on how it could work out.

There is advantage to this. D3 is very good with structured DOM that aligns nicely with data. But HTMLBars template is better with unstructured DOM that is sometimes needed to construct compound shapes.

barLayer: join('model.data[model.key]', '.bar', {
  enter: hbs`
    <line y1="0" y2="0"></line>
    <text>0</text>
  `,
  update(selection) {
    selection.select('line').attr('y2', this.get('yScale'));
    selection.select('text').text(accessor('value'));
  }
})

Things that still needs answers:

• How is this template going to be scoped? The template has nothing to do with Ember's Component system, so it can't be scoped the same.

mike-north/ember-resize is one

{{#data-visual as |stage width height|}}
  {{#parent-chart select=stage.svg.select.chart as |selection|}}
    {{child-chart-component select=selection}}
  {{/parent-chart}}
{{/data-visual}}

// parent-chart.js
Ember.Component.extend({
  call(selection) {
    this.set('yieldDown', selection.append('g'));
  }
})

// parent-chart.hbs
{{yield yieldDown}}

This is expected to work, but it doesn't. Because select= is expecting a selection proxy.

Do this instead.

// parent-chart.js
Ember.Component.extend({
  call(selection) {
    selection.append('g').classed('cls');

    this.set('yieldDown', this.get('select.cls'));
  }
})

This will make the select proxy correctly wrap the element to yield down.

So i've been playing with ember-cli-d3 v1.1.2

Overview i'm trying to do some complex rendering, using each loops inside a data visual. see this code, noting that arrangement-grid extends data-visual and yields stg.svg.select:

{{#arrangement-grid
  arrangement=arrangement
  isReady=isReady
  pxPerBeat=pxPerBeat
  scrollCenterBeat=scrollCenterBeat
  seekToBeat="seekToBeat"
  as |select height width|
}}
    {{#each mix.items as |item|}}
      {{arrangement-grid/track-clip
        select=select
        clip=item.fromTrackClip
        pxPerBeat=pxPerBeat
      }}

      {{#if item.isLastItem}}
        {{arrangement-grid/track-clip
          select=select
          clip=item.toTrackClip
          pxPerBeat=pxPerBeat
        }}
      {{/if}}
    {{/each}}
{{/arrangement-grid}}

Problem: call is only called for the last track-clip rendered in the each loop! i traced this down to be a bug with GraphicSupport.didReceiveAttrs, where scheduleOnce was overriding previous schedulings for the same selection (but DIFFERENT components). i fixed this locally, and am open to discussion on what you think of this approach

broken version:

  didReceiveAttrs() {
    this._super(...arguments);
    var selection = this.get('select');

    if (selection && !this.isDestroying && this.get('requiredProperties').map(prop => Boolean(!!this.get(prop))).reduce(((prev, cur) => prev && cur), true)) {
        // THIS LINE is overriding previous schedules, since `selection` is the same but `component` is different!
        Ember.run.scheduleOnce('afterRender', selection, selection.call, this);
    }
  }
});

fixt version:

  didReceiveAttrs() {
    this._super(...arguments);
    var selection = this.get('select');

    if (selection && !this.isDestroying && this.get('requiredProperties').map(prop => Boolean(!!this.get(prop))).reduce(((prev, cur) => prev && cur), true)) {
        // THIS LINE fixed by setting context to the component, so runOnce for each component
      Ember.run.scheduleOnce('afterRender', this, () => {
        selection.call(this);
      });
    }
  }
});

This issue is used to track/discuss any plan for 2.0 rollout. Below is a list of ideas that came to mind. Feedbacks appreciated.

• #35 data-generator is being removed. Users are suggested to migrate to using Marak/faker.js
• D3 4.0 release is imminent. 2.0 will migrate to using 4.0.
• graph test helper needs to be better thought out. With the introduction async/await, there may be better way to write this test helper.
• Drop support for Ember 1.x and only supporting Ember 2.x moving forward. With upcoming release of Ember LTS. It may make sense to only support LTS versions.
• The chiasm-project is interesting. Maybe good idea to base {{data-visual}} on it.
• Try to steer people to design data vis that take advantage of other great add-ons in the Ember community. This probably also means ember-cli-d3 will try to do less while empowering developer to do more. From the news that I have gathered on what's coming down the pipeline for Ember and Ember CLI, there may not be a need for this addon in the future.

I just started using ember-cli-d3 and I ran into an error where the package could not find ember-getowner-polyfill when imported. I was able to fix it by moving it from dev-dependancies to dependancies in package.json.

I'll open a PR if you want a quick merge

Hey,
I recently updated Ember to 2.6 and there is some compatibility issue. Charts throw an exception during rendering:
Uncaught TypeError: Cannot read property 'template' of undefined

It seems that something ember-cli-d3 use was removed in Ember 2.6. I was trying to find the cause but with no luck :(

looks like this line var list = app.options.d3.plugins || {};

I'd like to add a viewBox attribute to my svg.

e.g.

<svg viewBox="0 0 40 40" preserveAspectRatio="xMidYMid meet">
    <blah....>
</svg>

I can't work out how to do this. Any ideas?

The current convention is that .call on component with d3-support receives a d3 selection of the container <g> element. This causes some flexibility issue where component must use a <g> element as parent.

If .call are to receive an empty selection, the component will have control over what type of element it want as parent. This makes putting things in <defs> much easier.

The downside is that this may break a lot of existing code. 😦

while running ember-cli-d3 v0.7.0, my d3 graphs render just fine. as soon as i upgrade to 1.1.2 - with NO OTHER code or application changes - they stop rendering. (note upgrading does entail restarting my ember server, of course)

component with data-visual:

{{#data-visual
    as |svg width height|
  }}
    {{d3-axis
      select=(svg-transition svg.beat-grid)
      transform=(svg-translate 0 125)
      scale=beatViewScale
      orient="top"
      tickSize=125
      ticks=beatCount
    }}
{{/data-visual}}

d3-axis component:

import Ember from 'ember';
import d3 from 'd3';

import GraphicSupport from 'ember-cli-d3/mixins/d3-support';

import { assign } from 'ember-cli-d3/utils/d3';

export default Ember.Component.extend(GraphicSupport, {
  classNames: ['D3Axis'],
  transform: null,
  layout: hbs`{{yield}}`,

  ticks: null,
  tickSize: null,
  tickFormat: null,
  tickPadding: null,

  scale: null,

  axis: Ember.computed('scale', 'orient', 'ticks', 'tickSize', 'tickFormat', 'tickPadding', {
    get() {
      var props = this.getProperties('scale', 'orient', 'ticks', 'tickSize', 'tickFormat', 'tickPadding');

      return props.scale && assign(d3.svg.axis(), props);
    }
  }).readOnly(),

  call(sel) {
    console.log("axis call", sel) // THIS CONSOLE LOG IS NEVER HIT IN 1.1.2
    var axis = this.get('axis');
    var transform = this.get('transform');

    if (axis) {
      sel.attr('id', this.elementId)
        .attr('transform', transform)
        .call(axis)
        .each(function () {
          d3.select(this).selectAll('.tick')
            .classed('zero', (data) => !data);
        });
    }
  },
});

FYI, I've been working on ember-d3 as well. You can see my work here:

https://github.com/BryanHunt/ember-d3-components
https://github.com/BryanHunt/ember-d3-charts

If you have any interest in collaborating, I'd be open to discussion.

This addon seems to be very professional and extensible. However, I do not know how to implement D3 charts with it. Could you please extend your documentation and/or provide the code for the examples?

Thank you,
Manuel

after cloning bower i, npm i and ember s
on http://localhost:4200/gallery
i get this in the js console:
Uncaught Error: Could not find module dummy/tests/helpers/data-generator imported from dummy/services/dimensional-data-source
or I am doing something wrong?

result.match(/^url((#[A-Za-z][A-Za-z0-9_:.-]*))$/)

'0 10 20 10' test case

Depends on interest I guess.