<defs> the D3 way

[Bill Morris]

I've messed with Mike's vector tiles example in the interest of doing some crazier styling:

http://bl.ocks.org/wboykinm/7388233

But the way I shoehorned the <defs> tag in is a total hack. What is the "D3 way" for appending this sort of thing using JavaScript? FWIW I tried .append and .appendChild with the defs as a string variable but that didn't work.

Thanks!

[Chris Viau]

What's wrong with: d3.select('svg').append('defs').append('linearGradient') ?

Chris

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Bill Morris]

Omigod, absolutely nothing. I also just looked closer at a different example and found that solution. Thanks!

[Bill Morris]

Got it! But man, there has to be a more efficient way of scripting this out: https://github.com/wboykinm/geosprocket-labs/blob/gh-pages/vectiles/ctpalettes/page8.html#L79-L141

On Sunday, November 10, 2013 11:15:40 AM UTC-5, Chris Viau wrote:

[Ian Johnson]

none of that is data driven. why not type it out as a string and insert that?

i've written a plugin that can "copy paste" svg elements. you can pass it a string and insert that as an element (svg doesn't have an innerHTML unfortunately)

http://bl.ocks.org/enjalot/5754673

you can also just include that defs in your page as html if its not dynamic.

--
Ian Johnson - 周彦

http://enja.org

[Dan Wheatley]

alternatively, you could set up some kind of data object eg

defdata = [{filterName:feGaussianBlur, params:{in:SourceAlpha,...}, ...}, ...] etc, then do a normal data join:

svg.select('defs').selectAll('filter').data(defdata).enter().append('filter').attr(...)

does that make sense?

[Mike Tahani]

Agree with Ian. If it's always the same, why use Javascript/D3? Seems like there's nothing wrong with your initial approach.