I'm trying to find a way to have an image inside a circle in D3 and a text next to it.
I'm using force directed graph if it makes any difference.
So far i can find only partial solutions (only image, only text, only circle), but non that combines them all.
Any idea?
Can this example help?
http://bl.ocks.org/mbostock/950642
The related code is here:
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
Related
I have a force-directed graph made using D3.js. In Firefox, Chrome and Opera everything renders fine. My problem is that MS Edge (Win10, version 44.17763.1.0) doesn't draw edges and lines, that is the only flaw - otherwise everything works (texts, nodes, arrows, movement, zoom etc.).
Event such a simple code (below) doesn't work - the red line isn't drawn:
// test
legend.append("line")
.attr("x1", 0)
.attr("y1", 10)
.attr("x2", 40)
.attr("y2", 10)
.style("stroke", "red")
.attr("class", "link");
Here is the example: https://jsfiddle.net/svorad/jc0pa8dz/1/
I already tried everything I could thought of. Any ideas?
I want to add axis on a sankey diagram. The code for the chart can be found in the following links: https://github.com/irbp005/d3SankeyAndLineInteraction
The visual representation of the char is as follows:
Ans I want to add labels like:
Basically in both sides of the y axis. Any ideas on how can I achieve this?
This should be fairly straightforward. Add a g element for each side and apply a translation transform to position it in the x axis and then use something along the lines of this:
selection.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x", -height/2)
.attr("fill", "#000")
.style("text-anchor", "middle")
.text("Y Label");
Look through the 1st example in Chapter 1 here that explains the addition of X and Y labels to the plot axes:
https://leanpub.com/d3-t-and-t-v4/read
I'm a D3.js newbie, so I beg your pardon if I ask something too basic.
I have a simple array as a dataset:
[0, 10, 15, 20, 24, 35, 58]
For every element of my array I want to create a circle and horizontally put those circles at the same distance (12 pixel) starting from x=10 (and y being constantly 50). How can I do?
Thanks in advance.
Basic things you need to know about d3.js is, it binds data to svg elements and creates visualization.
To get to the basics of d3. You can google around.
Here are some sites that I prefer for d3 learning.
d3 - Ofcourse the official website. With all the codes and examples.
Dashing D3 - Free for basic and you can also get a paid extension for further d3 tutorials.
d3noob - You get a free PDF with all the line by line briefing in the PDF. The one I prefer the most for the beginners.
Here's the answer for the question - fiddle.
It's very simple on creating circles in d3.
Here's the code I've used.
var svg = d3.select('.circle')
.append('svg')
.attr('height', 500)
.attr('width', 500)
First off I append the svg element to the .circle div.
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr("cx", function(d, i) { return 60 * i })
.attr("cy", 60)
.attr("r", 20)
And then I add the circles depending on the number of data using the above block of code.
Note : .attr is that I'm adding attribute.
Here I've fixed the radius to 20.
But you can change the radius according to the data like this. function(d) { return d; }.
And ofcourse you can color the circles by using .style("fill", "#ddd") and other css stuffs using .style().
You can get more of this info from the websites I've provided.
Hope this helps.
I am trying to adapt Mike Bostock's Focus+Context via Brushing chart at: bl.ocks.org/mbostock/1667367 to include a drag icon on both vertical lines of the brush rectangle. These should appear once a selection is made and act as a visual cue to shrink or expand the selected/brushed area. I see the placement of the images being dynamic i.e. moving fluidly with the brushed area as opposed to an update after the brushed area is reset. What seems most reasonable to me would be to add an svg image to the context rectangle like so:
//original code
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7)
//additional code
.append("svg:image")
.attr("xlink:href", "icon.png")
.attr("width", 10)
.attr("height", 10)
.style("opacity",1)
I've tried playing around with the x and y positioning of both images with no luck getting them to appear, but i conceptually see it working as
y axis: height of context chart divided by 2
x axis: each image respectively corresponding to the min and max x values of the brushed area
Any help would be appreciated.
Lars, thanks for the pointer which generally led me in the right direction although I ended up directly adapting from an example at https://engineering.emcien.com/2013/05/7-d3-advanced-brush-styling. That example is a bit more complex so i borrowed from a subset relevant to my purposes.
Steps i followed include
1.) Creating two images appended to the context g element and initializing their position somewhere that doesn't give the impression that the chart is brushed on loading {i put them halfway (vertically) and close together around the end of the context(horizontally)}.
var leftHandle = context.append("image")
.attr("xlink:href", "icon.gif")
.attr("width", 11)
.attr("height", 27)
.attr("x",x2(data[data.length-6].date))
.attr("y", (height2/2)-15);
var rightHandle = context.append("image")
.attr("xlink:href", "icon.gif")
.attr("width", 11)
.attr("height", 27)
.attr("x",x2(data[data.length-1].date))
.attr("y", (height2/2)-15);
2.) Within the brush function, i created a variable to hold brush.extent(), then tied the x attributes of the images to its min and max x values.
var ext = brush.extent();
leftHandle.attr("x",x2(ext[0]));
rightHandle.attr("x",x2(ext[1]));
One things i'm not completely satisfied with is that when i initially created the images after the brush rectangle, they sat on top of it, preventing me from being able to brush if i hovered over the images (which is the intuitive reaction desired). I ended up placing the images behind the rectangle which has a low opacity. Not the 100% accurate visual representation sought, but it works just fine.
I try to do my first project with d3.js - but I got stuck ...
What I want to do:
Depending on the data, rectangles should get a different color. But: There are 187 datapoints, therefore 187 rectangles. To be all shown, my svg needs to have a width of 9000px - a lot of horizontal scrolling ...
Is there a way to kind of get a forced "line break" of the rectangles?
Obviously, increasing height doesn't work.
something like this might work. I can't be sure without actually seeing your code
rectangles
.attr("x", function(d, i) {return (i % barsPerRow) * barWidth;})
.attr("y", function(d, i) {return Math.floor(i / barsPerRow) * maxBarHeight;})
;
Like #meetamit said, svg does not have an html style layout.