How to do stroke-opacity:0 with d3 - javascript

Here is my code. My target - do intervals between slices in pie chart.
chart.svg.selectAll('path')
.style('stroke-opacity','0.0')
.style('stroke-width','10');
I think if stroke opacity will be 0 on piechart slices on web page it will be similar to interval between slices.
Problem: if stroke opacity equals to zero that doesn't work. If equals to number from 0.1 to 1.0 - all works. But I have another color from background.
Please give a hand to beginner! Thanks for attention and have a nice day.

I believe the problem comes from the misconception that, when you set stroke-opacity to 0, the stroke will be transparent and reveal the background colour, and the fill of the element will end at the internal limits of the stroke. But, in fact, if you set the stroke-opacity to 0, you'll reveal the fill of the element (and the background colour, once the stroke goes inwards and outwards in the default stroke-alignment).
Look, for instance, at this example:
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);
var color = d3.scale.category10();
data = [10, 20];
var rects = svg.selectAll(".rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", function(d){ return d*10})
.attr("y", 0)
.attr("width", 100)
.attr("height", 80)
.attr("fill", function(d){ return color(d)})
.attr("stroke-width", 10)
.attr("stroke", "white")
.attr("stroke-opacity", 0);
var rects2 = svg.selectAll(".rect2")
.data(data)
.enter()
.append("rect");
rects2.attr("x", function(d){ return d*10})
.attr("y", 100)
.attr("width", 100)
.attr("height", 80)
.attr("fill", function(d){ return color(d)})
.attr("stroke-width", 10)
.attr("stroke", "white");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
Both the pairs of rectangles are absolutely equal:
rects.attr("x", function(d){ return d*10})
.attr("y", 0)
.attr("width", 100)
.attr("height", 80)
.attr("fill", function(d){ return color(d)})
.attr("stroke-width", 10)
.attr("stroke", "white")
The only difference is that, in the upper pair, I add:
.attr("stroke-opacity", 0);
And that is the same of having no stroke.
You can see that, independent of the stroke alignment, the area and the size of the element is the same. Check the default stroke:
The rect element, outlined by a black line, remains the same.
To finish, I just found this fiddle (I don't know who's the author), and I set the stroke to white and stroke-width to 10: this is what you want, imitating a real padding. But you'll not get this result setting the stroke opacity to 0: https://jsfiddle.net/j1769sx2/

Related

How to add background shading to D3 line chart

I would like to add shading to the background of a D3 line graph. There would be different shades for different parts of the line. Here is an example
My approach is the add rectangle svg to the chart, but that doesn't seem to be working because I don't know how to make the width correspond with the data.
here is a jsfiddle
Here is an example of the rectangle creation:
svg.append("rect")
.attr("class", "shading")
.attr("x", d[1].date)
.attr("y", 80)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "blue");
Am I on the right track? How do I find the width so that it corresponds with the data?
UPDATE: There will be multiple square of different widths, so I can't just grab the width of the entire svg.
You can do it like this:
//get all the ticks in x axis
//make a pair of it refer: d3.pair
var data = d3.pairs(svg.selectAll(".x .tick").data());
//make a color category
var c10 = d3.scale.category10();
//to svg append rectangles
svg.selectAll("rect")
.data(data)//for the tick pair
.enter()
.append("rect")
.attr("class", "shading")
.attr("x", function(d){return x(d[0])})//x will be the 1st tick
.attr("y", 0)
.attr("width", function(d){return (x(d[1]) - x(d[0]));})//width will be the diff of 1st and 2nd tick
.attr("height", height)
.attr("opacity", 0.2)
.attr("fill", function(d,i){return c10(i)});//use color category to color the rects.
working code here
fill the svg first with the data, then after that get the width property, it should automatically calculate it

Added image to DOM element in d3 but now it won't transition

I'm trying to get an element with an appended image to transition using the d3.js library; I had successfully achieved this just using a plain circle that transitioned nicely around the screen but now that I've added a png the transition doesn't happen - the png does appear though when the page is refreshed, it just won't move like it did before! My code is below.. your help is appreciated!
<script>
var data = [60, 120, 40, 710, 560, 850];
var data1 = data[0];
var canvas = d3.select("body").append("svg")
.attr("width", 2000)
.attr("height", 2000);
var imgs = canvas.append("image")
.attr("xlink:href", "AWT-Bus.png")
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20")
.attr("cx", 50)
.attr("cy", 200)
.attr("r", 20)
;
imgs.transition()
.duration(data1*100)
.delay(2000)
.attr("cx", 200)
.transition()
.attr("cx", 50)
.attr("cy", 200)
.transition()
.attr("cx", 150)
.attr("cy", 300)
;
The attributes you are changing in your code (cx and cy) are applicable to circles which are described by the x and y co-ordinates of their center (cx and cy) plus the radius (r). This is why your circle example worked.
But images are described by their width, height and the x and y co-ordinates of the upper-left corner of the box (using x and y attributes as shown below).
Different svg elements have different attributes which describe their dimensions and their location on the page, so you need to be aware of the different attributes that each type of element has, perhaps using a reference such as https://developer.mozilla.org/en-US/docs/Web/SVG/Element. Then you can animate your svg element using transition as you have done in your code and changing the value of the appropriate attribute.
var canvas = d3.select("body").append("svg")
.attr("width", 2000)
.attr("height", 2000);
var imgs = canvas.append("image")
.attr("xlink:href", "AWT-Bus.png")
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20");
imgs.transition()
.duration(2000)
.delay(1000)
.attr("x", 200)
.transition()
.attr("x", 50)
.attr("y", 200)
.transition()
.attr("x", 150)
.attr("y", 300);

Why is d3 ignoring my color array?

I'm trying to build out a simple color chart, as an introductory d3 exercise, and I'm already stuck.
I have the following:
var colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"];
var barHeight = 20,
barWidth = 20,
width = (barWidth + 5) * colors.length;
d3.select("body").selectAll("svg")
.data(colors)
.enter().append("rect")
.attr("class", "block")
.attr("width", barWidth)
.attr("height", barHeight - 1)
.text(function(d) { return d; })
.attr("fill", function(d) { return d; });
https://jsfiddle.net/xryamdkf/1/
The text works fine. I see the hex codes, but the height and width are definitely not respected, and I can't seem to set the color.
This works to set the color: .style("background", function(d) { return d; }) but I think that is the text background, not the rect fill.
What am I doing wrong here? How can I make 20x20 rectangles filled with color in d3?
As you are not giving any index and reference of colors array into your function the code will not understand from where to pick colors. try with below code it will help.
d3.select("body").selectAll("svg")
.data(colors).enter().append("rect")
.attr("class", "block")
.attr("width", barWidth)
.attr("height", barHeight - 1)
.text(function(d) {
return d;
})
.attr("fill", function(d,i) { return colors[i]; });
So, a few things. You should call data() on what will be an empty selection of the things you will be adding.
svg.selectAll("rect").data(colors)
.enter().append("rect")
The rect doesn't have a text property. There is an svg text node that shows text and you'll want to add it separately.
I hope this https://jsfiddle.net/xryamdkf/8/ gets you closer.

How to draw gradient arc using d3.js?

I have started using d3.js. I have following requirement
Requirement:
What I have tried?
fiddle
Question?
How to achieve gradient as same as above image.
Any suggestion or idea will be grateful.
Note
I am just started d3.js.
Edit - changed data structure and fiddle link to represent unfilled chunk at the beginning.
I would use the pie function in d3 to create a pie chart.
The image above is basically a pie with two different gradient styles applied to the pie chunks.
A red linear gradient and a black/white radial gradient.
I created a fiddle linked below to show you an example.
The key here is that you need to structure your data to also include the percentage that should not have the red-gradient applied.
Using the example above, we have three chunks with red and the rest as unfilled.
Imagine the data set like so:
var data = [{
percent: 10,
pie: 0
}, {
percent: 13,
pie: 1
}, {
percent: 13,
pie: 1
}, {
percent: 6,
pie: 1
}, {
percent: 56,
pie: 0
}];
So we have the percent and we also flag which chunks should be red and which chunk should be the unfilled section using the pie attribute.
You can use whatever data set you wish but I'm just using this as an example.
So next thing is to create your SVG element:
var width = 400;
var height = 400;
var radius = Math.min(width, height) / 2;
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(((radius - 10) / 5) * 4);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) { return d.percent });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
and after this we will create the two gradients to style the pie chunks.
So first one is the linear red gradient:
// append a defs tag to SVG, This holds all our gradients and can be used
//by any element within the SVG we append it to
var defs = svg.append("svg:defs")
//next we append a linear gradient
var red_gradient = defs.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%")
.attr("spreadMethod", "pad");
//first dark red color
red_gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "rgb(221,48,2)")
.attr("stop-opacity", 1);
//second light red color
red_gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "rgb(247, 78, 1)")
.attr("stop-opacity", 1);
Then we append the radial gradient for the unfilled part. This one is a little tricker because we need to move the gradient with a transform to get the right radial center. If you translate it half the width and height I think it should work out.
var radial_gradient = defs.append("radialGradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", '50%')
.attr("cy", '50%')
.attr("r", "75%")
.attr("fx", '50%')
.attr("fy", '50%')
.attr('gradientTransform', "translate(-200,-200)")
.attr("id", 'gradient2');
radial_gradient.append("stop").attr("offset", "0%").style("stop-color", "black");
radial_gradient.append("stop").attr("offset", "55%").style("stop-color", "white");
radial_gradient.append("stop").attr("offset", "95%").style("stop-color", "black");
Once we have set up the gradients, we can add the pie:
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
// we create a function to append the different chucks of the pie.
// we check the pie attribute from the data and apply the correct gradient.
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
if (d.data.pie === 1) {
console.log('true' + d.data.pie);
return "url(#gradient)"
}
else {
console.log('false' + d.data.pie);
return "url(#gradient2)"
}
})
JSFiddle: http://jsfiddle.net/staceyburnsy/afo292ty/2/

Draw SVG image on paths but as big as needed

So I would like to show an image on a path. The pathes are created via topojson coordinates. The points are on the right position on my map. So the next thing is to show a SVG image on that point.
I tried that with appending svg:image, but no chance. I also tried to bring it into the path with the same result. I nowhere can see that image. Here an example with an PNG image. Because at least that should work to exclude SVG issues:
var featureCollection = topojson.feature(currentMap, currentMap.objects.points);
svgmap.append("path")
.attr("id", "points")
.selectAll("path")
.data(featureCollection.features)
.enter().append("path")
.attr("d", path);
svgmap.append("svg:image")
.attr("class","svgimage")
.attr("xlink:href", "pics/point.jpg" )
.attr("x", -20)
.attr("y", -20)
.attr("width", 13)
.attr("height", 13);
Edit
svgimage.append("pattern")
.attr("id","p1")
.attr("patternUnits","userSpaceOnUse")
.attr("width","32")
.attr("height","32")
.append("image")
.attr("xlink:href", "pics/point.jpg" )
.attr("width", 10)
.attr("height", 10);
svgmap.append("g")
.attr("id", "points")
.selectAll("path")
.data(featureCollection.features)
.enter().append("path")
.attr("d", path)
.attr("fill", "url(#p1)");
But still not working.
Edit2
I mentioned that it is an issue with the size. So I now played a bit with the sizes and there I can see some more, but most of them are not fully imaged. Just some pieces of the cirle somehow. Strange thing. I keep on testing:
svgimage.append("pattern")
.attr("id","p1")
.attr("patternUnits","userSpaceOnUse")
.attr("width","10")
.attr("height","10")
.append("image")
.attr("xlink:href", "pics/point.jpg" )
.attr("width", 15)
.attr("height", 15);
Here a picture of the current result (jpg): http://i.imgur.com/T58DA1j.png not yet perfect.
This is when I increase the pointRadius (this is now a SVG): http://i.imgur.com/Z7nZUWk.png
The solution is pretty easy. The size of the picture was just not correctly set. Also the userSpaceOnUse needs to be deleted and if needed you can set the creation position with x and y:
svgimage.append("pattern")
.attr("id","p1")
.attr("width","10")
.attr("height","10")
.append("image")
.attr("xlink:href", "pics/point.jpg" )
.attr("width", 5)
.attr("height", 5)
.attr("x", 1)
.attr("y", 2);
and in the second part it is important to set the pointRadius. You can set it directly on the path or in the definition. If you want to use different sizes later on it makes more sense to set it in the path directly:
.attr("d", path.pointRadius(3.5))

Categories