d3.js bar chart: .text doesn't show up - javascript

I'm building a simple bar chart using d3.js and it works fine.
However, when I try to display texts on each bar, nothing happens. The console doesn't return any error so I can't understand the problem.
My code is available here, I tried to display simple text like "Hello" but still nothing shows up.

Problem:
Appending texts to a rect element in SVG.
Solution:
Append the texts to the SVG or to a group.
Instructions:
You are appending your texts to the rectangles. Nothing will show up as an error in the console because there is no error to show, but the texts won't appear.
You have to create a variable for the texts:
var texts = svg.selectAll(".mytexts")
.data(data)
.enter()
.append("text");
And then setting the attributes:
texts.attr("class", "value")
.attr("x", function(d) { return widthScale(d.vacant); })
.attr("y", heightScale.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return format(d.vacant); });
Don't forget to change the CSS accordingly.

Related

How can I continue displaying a tooltip when it hovers over text in a d3 map

I have a D3 Mercator map. In the center of each area, there is text with the name of the area. I also have a tooltip with more information about the area. It is working properly except the tooltip does not display when I hover over the text. How can I define the text to avoid this?
paths.selectAll("text")
.data(wards.features)
.enter().append("svg:text")
.text(function(d){
return (d.properties.SCODE_NAME);
})
.attr("x", function(d){
return path2.centroid(d)[0];
})
.attr("y", function(d){
return path2.centroid(d)[1];
})
.attr("text-anchor","middle")
.attr("font-size","24px");
.attr("pointer-events", "none") solved my problem.

d3.js v4: How to display an image after mouse click on a node

Still being rather inexperienced in using d3.js I have hit a road block.
Hoping anybody out there can help me.
I am trying to display a picture upon mouse click on a node in a graph.
Ideally, I'd like to click on several nodes and display images. Double click on a node should remove the image. And clicking on the background removes all displayed images. But one step at a time.
What I have done so far is:
Succeeded in using tooltips. I was also able to change the size of a circle node upon mouse clicking on it.
I used as toy project Mike Bostock's force-directed graph example: https://bl.ocks.org/mbostock/4062045 .
I am using d3.js v4
Based on an example on the web I was able to add pictures to all nodes:
Add different images for nodes in d3 v4 network graph
I tried to tailor this example to my needs. First I added:
var defs = svg.append('defs');
Further more:
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(node_drag)
.on("click", function(d){
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
})
In my browser the html indicates that the image is added:
But the image is not showing in the browser.
At this point I am turning to you and hope for some hints how I can accomplish displaying an image as node upon clicking with my mouse cursor on it.
Any input is highly appreciated,
Markus
Your inspector is showing that the image was appended to the pattern, but it was never linked to the circle element.
Instead of appending the pattern to the defs inside the click function, you should just append the pattern with a given ID...
var defs = svg.append('defs');
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("id", "myPattern")//ID here
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
... and then, inside the click, just change the fill of the circle according to that ID:
.on("click", function() {
d3.select(this).attr("fill", "url(#myPattern)")
})
Here is Bostock's bl.ocks with those changes (I made the circles bigger so you can better see the image): https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf

How to make sure labels in a force-directed graph do not get covered up?

I am making a very basic force-directed graph with labels using the d3.js library. Here is part of my code:
var node = d3.select("#canvas").selectAll(".node")
.data(data_nodes)
.enter()
.append("g")
.attr("class","node");
var nodes = node.append("circle")
.style("fill","green")
.style("r",10);
var text = node.append("text")
.attr("dx", 20)
.attr("dy", ".35em")
.style("z-index",1)
.text(function(d){
return d.name;
});
This goes well at the beginning but due to the shifting location of nodes that occurs with the ticking, these text elements that are supposed to serve as labels get covered up by other nodes. I would like to know if there is a way to solve this problem.

Unable to get drop-shadow on the bars

I am working on a bar chart and I need to get the chart to look like this:
Here is what I tried:
.attr("id", "drop-shadow")
.attr("height", "130%");
but it did not work.
jsfiddle
How do I fix this?
Try this fiddle.
Chart looks like that same as the image.
But i didn't do it adding a drop shadow.
Added ellipse before the bar being created and that gives the same effect as above.
svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.age) + 30; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 35)
.attr("ry", 5)
.style("fill", function(d) { return d.color2; })
This is very simple. You need to create a ellipse before the bar is created.
When we position the ellipse it acts like a drop shadow.
Sorry that i don't have time to get the contrasting colors of the bar. But you can amend it of course.
If you'd like to do it with a drop shadow.
Here's a link that requires a javascript library for the drop shadow of the svg elements.
Hope this helps.

Show box on mousehover

I am beginning with d3.js and I would like to know the simplest way to show a box containing text (a tooltip) when my the mouse is over a node of my force-directed graph. Moreover, the text contained in this box must be custom for each node (something like function(d){return d.fullName;}))
Here is a sample code of what I have for now.
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class", "node");
node.append("circle")
.attr("r", 12)
.style("fill", "orange");
Thanks in advance
By box, do you mean a tooltip? In Mike's examples, he uses this idiom:
node.append("title")
.text(function(d) { return d.fullName: });
(With other types of elements (divs only?) you can just use element.setAttribute("title", "title");.)

Categories