Open ggstuart opened 8 years ago
You can choose to build this in Ember template or d3. The add-on actually don't enforce much on this. The only component {{data-visual}}
only does the measuring of the container so you'll have a easier time laying things out in SVG.
As of ember-cli 2.8, there is even less of a need for this addon. baseURL
is fixed and resize/measuring can be handled by ember-element-resize-detector
, baseURL
So are you recommending I don't use the add-on? I need to use d3 in my ember-cli app and I'm looking for a way to integrate. My first experiments yesterday led to this:
import Ember from 'ember';
import GraphicSupport from 'ember-cli-d3/mixins/d3-support';
export default Ember.Component.extend(GraphicSupport, {
diameter: null,
score: null,
call(selection) {
blah...
}
});
{{#data-visual as |ctx width height|}}
{{my-component select=ctx.svg.select.face diameter=50 score=0.5}}
{{/data-visual}}
Is this a bad pattern? How/where should I access the
It's not a bad pattern. That's the pattern you should be using. The select=...
element is passed in as .call(selection)
and you can do whatever you like with it.
You can do the same with didRender
hook on the component and access the element via this.get('element')
.
Thanks. What I don't understand is how to start with a simple svg element. This kind of thing is new to me. How can I pass an svg element so it becomes the selection?
Neither select=ctx
nor select=ctx.svg
work. Do I create an svg in my template or set the tagName of the component to svg
and use the didRender
hook?
I'd like to add a viewBox attribute to my svg.
e.g.
I can't work out how to do this. Any ideas?