Howto to fill rect with (linear)gradient?

[Jacob Houtman]

Just started using D3, and do like it very much!

Didn't succeed in creating a rect with SVG linearGradient fill. Did
try 2 options.

1. Create linearGradient object in D3 (seems most elegant options).
Issue: doesn't fill at all and I don't know how to set stop offset and
color.
2. Create linearGradient object in HTML page. Issue: fills fine in
Chrome and Firefox, bot not in Safari.

Would appreciate any help. Below is my code for both options.

1. Code for D3 option
Inside js document to create linearGradient object:
matrixGradientClr = vis.selectAll("color")
.data([0])
.enter().append("svg:linearGradient")
.attr('x1', "0%")
.attr('y1', "0%")
.attr('x2',"100%")
.attr('y2',"100%")
.attr('spreadMethod', "pad");


Inside js document to fill rect:
.attr("fill", matrixGradientClr)

2. Code for HTML option

Inside HTML document:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink">
<defs>
<linearGradient id="matrixLinearGradient"
x1="0%" y1="0%"
x2="100%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#cc0000" stop-opacity="1"></stop>
</linearGradient>
</defs>
</svg>

Inside js document to fill rect:
.attr("fill", 'url(#matrixLinearGradient)')

[Mike Bostock]

In your D3 code, you were passing a selection (matrixGradientClr) to
the "fill" attr. You need to use a URL and an ID, like you always do
in SVG. Like this:

http://bl.ocks.org/1086421

Mike

[Jacob Houtman]

Thanks a lot, your quick reply did solve my issue!

And on top of that, from your great example I did grow my svg and
javascript knowledge.

Jacob

[jandot]

Hi Mike,

Great reply. I have a follow up question: how do I make the color gradient dependent on properties of the object itself? Suppose I have an array of objects that I want to show:

var objects = [{cx:50, cy:50,col:"red"},{cx:100,cy:100,col:"green"},{cx:150,cy:150,col:"blue"}]

var node = svg.selectAll("circle.node")

    .data(nodes)

  .enter().append("svg:circle")

    .attr("class", "node")

    .attr("cx", function(d) { return d.cx; })

    .attr("cy", function(d) { return d.cy; })

    .attr("r", 20)

    .style("fill", function(d) { return d.col; })

    .style("stroke", "none");

In the code above, there will be 3 circles, each coloured using a function on the objects:

    "fill", function(d) { return d.col }

How do I have to alter the gradient.append("svg:stop") code to take this into account? Let's say that in each case I want the gradient to go from the colour mentioned in the object towards white...

Thank you!

jan.

[Wesley Goi]

Just wondering, have there been any updates on the question jandot posted? regarding the assigning of lineargradient attributors based on the object's properties? 

thanks! 

[David Greis]

I agree. This would be a helpful thing to have explained. :)

D

[Ian Johnson]

gradients work by setting the fill of your circle to url(#gradientId)

this means you need to create a gradient element for each circle. each of those gradients will need stop elements that can be data driven.

it would be useful to see example code in bl.ocks.org or tributary.io to illustrate the problem so an appropriate approach could be suggested :)

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

--
Ian Johnson - 周彦

http://enja.org