Can I add attributes to the <svg> element?

[ggstuart]

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?

[ming-codes]

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

[ggstuart]

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:

my-component.js

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...
  }
});

template.hbs

{{#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 element? How would I do this without your add-on?

[ming-codes]

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').

[ggstuart]

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?