D3.js CodeFlower Image as circle background - javascript

I am using CodeFlower built upon D3.js. I want to show an image as a background instead of arbitrary colors, and i successfully did that using SVG Patterns.
DEMO FIDDLE
// Enter any new nodes
this.node.enter().append('defs')
.append('pattern')
.attr('id', function(d) { return (d.id+"-icon-img");}) // just create a unique id (id comes from the json)
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 80)
.attr('height', 80)
.append("svg:image")
.attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It comes from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
.attr("x", 0)
.attr("y", 0)
.attr("height", 80)
.attr("width", 80)
.attr("preserveAspectRatio", "xMinYMin slice");
this.node.enter().append('svg:circle')
.attr("class", "node CodeFlowerNode")
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
.style("fill", function(d) { return ("url(#"+d.id+"-icon-img)");})
/* .style("fill", function color(d) {
return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
})*/
.call(this.force.drag)
.on("click", this.click.bind(this))
.on("mouseover", this.mouseover.bind(this))
.on("mouseout", this.mouseout.bind(this));
The problem i am seeing is the image is not centrally aligned in the circle it is kind of tile layout composed of 4 images.
How can i make its position center and covering the circle nicely.
DEMO FIDDLE

You need to change the way you define your pattern. You should define it with respect to the element it is being applied to. So leave patternUnits at the default of objectBoundingBox, and set the width and height to 1.
Then you need to also set the patternContentUnits to objectBoundingBox also, and give the <image> the same size (width and height of 1).
this.node.enter().append('defs')
.append('pattern')
.attr('id', function(d) { return (d.id+"-icon");})
.attr('width', 1)
.attr('height', 1)
.attr('patternContentUnits', 'objectBoundingBox')
.append("svg:image")
.attr("xlink:xlink:href", function(d) { return (d.icon);})
.attr("height", 1)
.attr("width", 1)
.attr("preserveAspectRatio", "xMinYMin slice");
Demo fiddle here

Related

D3 transition not occurring on svgelement.enter()

I'm throwing in some fairly simple code to build out some rectangles from a data file which is all working fine, however I'm trying to add in a transition for the rectangles.enter() something akin to .transition().duration(1000)
I've looked at using the .on() function prior to the transition, but no matter where I put it in the code either no change, or the whole graph disappears. Is it possible to add in a transition on the enter function, or do I need to work around to use d3.select
d3.json("data/buildings.json").then(function(data){
data.forEach(function(d){
d.height = +d.height;
});
console.log(data);
var svg = d3.select("#chart-area").append("svg")
.attr("width", 400)
.attr("height", 400);
var rectangles = svg.selectAll("rect")
.data(data);
rectangles.enter()
.append("rect")
.attr("x", function(d,i){
return (i * 50) + 25;
})
.attr("y", 25)
.attr("width", 40)
.attr("height",function(d){
return d.height;
})
.attr("fill", "grey")
})
The simple answer is no, for a transition you would need to define two states: the initial state and the final state of the animation. Using the enter - update - exit cycle of d3 you could end up with something like this:
the rectangles fly in from the center of the SVG changing their sizes and color in one smooth transition.
The enter phase sets the initial state of the transition, the update phase performs the changes during the transition to reach the final state. Exit is not really needed for this example. It would take care of removing nodes that no longer exist after the update phase.
There are plenty of good examples and a tutorial about the topic over at https://bl.ocks.org for further reading.
d3.json("data/buildings.json").then(function(data){
data.forEach(function(d){
d.height = +d.height;
});
console.log(data);
var width = 400;
var height = 400;
var svg = d3.select("#chart-area").append("svg")
.attr("width", width)
.attr("height", height);
var rectangles = svg.selectAll("rect")
.data(data);
var rectEnter = rectangles.enter()
.append('rect')
.attr('x', width/2)
.attr('y', height/2)
.attr('width', 1e-6)
.attr('height', 1e-6)
.attr('fill', 'red')
var rectUpdate = rectEnter.merge(rectangles)
rectUpdate.transition()
.duration(1500)
.attr('x', function(d,i) { return (i * 50) + 25 })
.attr('y', 25)
.attr('width', 40)
.attr('height', function(d) { return d.height })
.attr('fill', 'grey')
var rectExit = rectangles.exit().remove()
})
and the dataset buildings.json
[
{
"id": 1,
"height": 20
}, {
"id": 2,
"height": 40
}, {
"id": 3,
"height": 10
}
]

D3.js Trying to use histogram layout to draw rectangles

So I'm sort of new to Javascript and I am trying to create a histogram using d3.js. I've been following tutorials and examples of previously created histograms in d3 but cannot figure out how to make my rectangles appear.
My histogram currently contains 4 bins with the numbers 1, 2, 3 and 4 in each bin symbolizing a color attribute of each data point in my dataset. When I do console.log(d) in the .attr "x" function it will appear as an a kind of array with 4 different indices, each with the total number of data points in my dataset with that specific color. Now I'm trying to make that "array" into rectangles but my width and height functions aren't correct. If someone could explain what d.dx and d.y do any why they're wrong that would be helpful. I'm using d3.v3.min.js as my script src value
d3.csv("data.csv", function(data) {
var map = data.map(function (i) { return parseInt(i.color); })
var histogram = d3.layout.histogram()
.bins(4)(map)
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var bars = canvas.selectAll(".bar")
.data(histogram)
.enter()
.append("g")
bars.append("rect")
.attr("x", function (d)
{
//console.log(d)
return d.x * 5; })
.attr("y", 0)
.attr("width",function(d) { return d.dx; })
.attr("height", function(d) { d.y; })
.attr("fill", "steelblue");
});
I updated your plunk as follows.
bars.append("rect")
.attr("x", function(d) { return d.x*100; })
.attr("y", 50)
.attr("height", function(d) { return d.y * 10;})
.attr("width", function(d) { return d.dx*50;})
.attr("fill", "steelblue")
.on("mouseout", function()
{
d3.select(this)
.attr("fill", "steelblue");
})
.on("mouseover", function()
{
d3.select(this)
.attr("fill", "orange");
});
Your code seems to work fine, only your elements are overlapping (also, d3 v4 was referenced instead of v3). What I did is:
multiply d.x by 50 to space the elements
multiplied d.dx by 50 to reduce the overlapping
As to your former questions:
d.x corresponds to the extent of a bin, in your case 0.75 (4 ranges make between 1 and 4 make 0.75: 1+(0.75*4)=4)
*d.y corresponds to the 'height' of a bin, i.e. the number of elements.

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

Adding 'measures' label to D3 bullet chart

I'm working with D3's bullet chart and am trying to figure out how to display the actual measures number just to the right of the measures rectangle. Since I want to do this for every bullet chart, I figure it'd be best to do it right in the bullet.js code. I'm rather new to D3 so any help would be much appreciated! Here is the link to Mike Bostock's bullet chart example with the bullet.js included at the bottom.
It looks like the measures code is handled in this snippet:
// Update the measure rects.
var measure = g.selectAll("rect.measure")
.data(measurez);
measure.enter().append("rect")
.attr("class", function (d, i) { return "measure s" + i; })
.attr("width", w0)
.attr("height", height / 3)
.attr("x", reverse ? x0 : 0)
.attr("y", height / 3)
.transition()
.duration(duration)
.attr("width", w1)
.attr("x", reverse ? x1 : 0);
measure.transition()
.duration(duration)
.attr("width", w1)
.attr("height", height / 3)
.attr("x", reverse ? x1 : 0)
.attr("y", height / 3);
I thought I could just add something like this after the rect is appended but I've had no such luck.
measure.enter().append("text")
.attr("dy", "1em")
.text(function (d) { return d.measurez; })
.attr("x", reverse ? x0 : 0)
.attr("y", height / 3)
.transition()
.duration(duration)
.attr("width", w1)
.attr("x", reverse ? x1 : 0);
Thank you in advance for your consideration!
You almost got it -- there're just two small things to consider. First, you can't call .enter() twice. Once the enter selection has been operated on, it's merged into the update selection and your second selection will be empty. This is fixed easily by saving the selection in a variable, but in this case I would recommend making a separate selection for the text labels.
var measureLabel = g.selectAll("text.measure")
.data(measurez);
measureLabel.enter()....;
Second, to position the text to the right of the rect, you need to take not only the position, but also the width into account when computing the position of the text element. Also, you can omit a few elements that are not relevant to text elements.
measureLabel.enter()
.append("text")
.attr("class", function(d, i) { return "measure s" + i; })
.attr("dy", "1em")
.attr("dx", "1em")
.text(String)
.attr("x", reverse ? function(d) { return w0(d) + x0(d); } : w0)
.attr("y", height / 3);
measureLabel.transition()
.duration(duration)
.attr("x", reverse ? function(d) { return w1(d) + x1(d); } : w1);
Complete example here.

how to use svg:defs to create rect with same height in d3.js?

I am working on a d3.js project where I am displaying a number of rectangles to be the same height. The rectangles are connected to a input[type=number] that adjust the height of each group of rectangles. To make animation easier (so I only have to manipulate the svg:defs onchange of the number input), I would like to be able to specify the height of a group of rectangles with a svg:def tag like this:
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.append("defs").selectAll(".rectdef")
.data(data).enter()
.append("rect")
.attr("class", "rectdef")
.attr("id", function (d, i){return "rect" + d.name;})
.attr("x", 0) // overridden below
.attr("width", 0) // overridden below
.attr("y", 0) // overridden below
.attr("height", function (d, i){return d.height});
and then to be able to just refine placement x, y and width of the rectangles with something like this:
svg.selectAll(".bar")
.data(data).enter()
.append("use")
.attr("class", "bar")
.attr("xlink:href",function (d){return "#rect"+d.type;})
.attr("x", function(d) { return d.x })
.attr("width", function (d) {return d.w;}) // this does NOT adjust width!
.attr("y", function (d) {return 0;});
This snippet correctly changes the x and y coordinates but it does not properly change the width! Any ideas what's wrong here? Is this a browser issue (I'm using Chrome 24.0.1312.52)? Is width not editable like this on an svg:use tag?
There aren't any problems with the data (I've checked that) and I have been able to confirm that the animation does work correctly.
If you point a <use> element at a <rect> the width/height of the <use> are ignored according to the SVG specification
I recomment you put the <rect> in a <symbol>, and then have the use reference the symbol. That way the width/height of the use will apply to the rect. You probably want to make the rect's width/height 100% within the symbol.
In other words, something like this should work:
svg.append("defs").selectAll(".rectdef")
.data(data).enter()
.append("symbol")
.attr("class", "rectdef")
.attr("id", function (d, i){return "rect" + d.name;})
.append("rect")
.attr("x", 0) // overridden below
.attr("width", "100%") // overridden below
.attr("y", 0) // overridden below
.attr("height", function (d, i){return d.height});
svg.selectAll(".bar")
.data(data).enter()
.append("use")
.attr("class", "bar")
.attr("xlink:href",function (d){return "#rect"+d.type;})
.attr("x", function(d) { return d.x })
.attr("width", function (d) {return d.w;}) // this correctly adjusts width!
.attr("y", function (d) {return 0;});

Categories