I'm using d3 to create a map and add some data on it in. So far, I managed to draw circles based on the data that I pull from database. What I want to do is, when I mouseover one of those circle, create a new bigger circle with some text on it. I was able to draw the bigger circle but couldn't figure out how to add the label or text on it.
This is how I add circles to the map.
for (var i = 0; i < data.length; i++) {
var coordinates = projection([data[i]["Longitude"], data[i]["Latitude"]]);
svg.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 5)
.attr('fill', 'black')
.attr('class', 'pClass')
.attr('id', data[i]["Id"])
.attr('dataId', data[i]["DataId"])
.on('mouseover', dataMouseover);
}
Here is the mouseover event
function dataMouseover() {
var id = $(this).attr('id');
var d= $.grep(data, function (e) { return e.Id == id; });
var coordinates = projection([d[0]["Longitude"], d[0]["Latitude"]]);
svg.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 120)
.attr('fill', 'darkblue')
.attr('class', 'pClass')
.attr('id', data[0]["Id"] + "popUp")
.attr('dataId', plaques[0]["DataId"])
.attr("stroke", "white")
.attr("stroke-width", "5")
.on('mouseout', function () {
d3.select(this).remove();
});
}
So, I'm also removing the bigger circle when mouse is out. What I want is to put a text in that circle from the data while drawing it in there.
UPDATE: I updated my code to change current circle's radius instead of drawing new one.
for (var i = 0; i < data.length; i++) {
var coordinates = projection([data[i]["Longitude"], data[i]["Latitude"]]);
svg.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 5)
.attr('fill', 'black')
.attr('class', 'pClass')
.attr('id', data[i]["Id"])
.attr('dataId', data[i]["DataId"])
.on('click', function () {
$("#dialog").dialog('open');
})
.on('mouseover', function (data) {
var sel = d3.select(this);
sel.moveToFront();
d3.select(this)
.transition()
.duration(200)
.attr('fill', 'darkblue')
.attr('r', 120)
.attr('stroke', 'white')
.attr('stroke-width', '5')
})
.on('mouseout', function () {
d3.select(this)
.transition()
.duration(200)
.attr('fill', 'black')
.attr('r', 5)
.attr('stroke', 'none')
.attr('stroke-width', '0')
});
}
Still could use some guidance on how to use g element to cover both circle and text in my case.
You can't actually add text inside an svg circle. I discovered this to my own chagrin as well a few weeks ago. :\
Instead, encapsulate both the circle and the text inside a g element. Here's a link to a SO post explaining exactly how to do that: d3 add text to circle
Steps to going about doing this:
On hover: Instead of appending a circle, first append a g element.
Then append a circle element to that g element
Then append a text element to that g element
??? (stylize the elements as you will...)
Profit from having it look like the text is inside the circle!
Also: instead of redrawing the entire circle on mouseover, see if you can just change the r attr of the circle on mouseover. Might save you some code & make your app update a bit faster.
Related
I have this piece of code in which circles are drawn, I need to put a text inside each circle, I would also like to know how I can put a certain size to each of the elements of the circle.
Thank you very much.
svg = d3.select(selector)
.append('svg')
.attr('width', width)
.attr('height', height);
// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
.data(nodes, function (d) { return d.id; });
// Create new circle elements each with class `bubble`.
// There will be one circle.bubble for each object in the nodes array.
// Initially, their radius (r attribute) will be 0.
bubbles.enter().append('circle')
.classed('bubble', true)
.attr('r', 0)
.attr('fill', function (d) { return fillColor(d.group); })
.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
.attr('stroke-width', 2)
.on('mouseover', showDetail)
.on('mouseout', hideDetail);
// Fancy transition to make bubbles appear, ending with the
// correct radius
bubbles.transition()
.duration(2000)
.attr('r', function (d) { return d.radius; });
A good practice would be to create a group element for each bubble because they will be composed of two elements - a circle and text.
// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
.data(nodes, function(d) {
return d.id;
})
.enter()
.append('g')
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.classed('bubble', true)
.on('mouseover', showDetail)
.on('mouseout', hideDetail)
After that, circles and texts can be appended:
circles = bubbles.append('circle')
.attr('r', 0)
.attr('stroke-width', 2)
texts = bubbles.append('text')
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('font-size', d => d.radius * 0.4 + 'px')
.attr('fill-opacity', 0)
.attr('fill', 'white')
.text(d => d.text)
// Fancy transition to make bubbles appear, ending with the
// correct radius
circles.transition()
.duration(2000)
.attr('r', function(d) {
return d.radius;
});
For hiding/showing text, you can use fill-opacity attribute and set it 0 when the text should be hidden, and 1 if it should be shown:
function showDetail(d, i) {
d3.select(this.childNodes[1]).attr('fill-opacity', 1)
}
function hideDetail(d, i) {
d3.select(this.childNodes[1]).attr('fill-opacity', 0)
}
example: https://jsfiddle.net/r880wm24/
I have some data with 2 attributes: colour and value
I use the D3 enter selection to create circle elements, and append them to the body of the page. Their fill colour is determined by the "colour" attribute.
Then, I append text elements to the page. The text contents are determined by the "value" attribute.
Here is what I am working with:
// Set up svg element
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300)
.style("background", "lightblue");
var dataset = [
{"colour":"red", "value":"First set of text"},
{"colour":"green", "value":"Second attempt"},
{"colour":"blue", "value":"Third and final!"}
];
// Create circles from the data
// On mouseover, give them a border (remove on mouseout)
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("r", 40)
.attr("cy", function(d, i) { return i*80 + 40; })
.attr("cx", 50)
.style("fill", function(d) {return d.colour;})
// HERE
// Can I somehow show and hide the text component that is
// associated with this circle when the circle is hovered, rather
// than the text itself?
.on("mouseover", function(d) {
d3.select(this).style("stroke", "black")
.style("stroke-width", 2)
})
.on("mouseout", function(d) {d3.select(this).style("stroke", "none")});
// Now add the text for each circle
// Same thing with mouseover and mouseout
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("y", function(d, i) { return i*80 + 40; })
.attr("x", 50)
.style("opacity", 0)
.on("mouseover", function(d) {d3.select(this).style("opacity", 1)})
.on("mouseout", function(d) {d3.select(this).style("opacity", 0)})
.text(function(d) { return d.value;});
I would like for the text to be hidden, until the associated circle is hovered over. How can I connect the text element with a particular circle, so that I can toggle whether the text is shown by hovering over the circle?
This fiddle below is an outline of what I am trying to do, and what I have got so far. I have the text showing up only when hovered, but not when the circle is hovered.
https://jsfiddle.net/aj4zpn6z/
There are several ways for achieving this. Since both circles and texts use the same dataset, my solution uses filter.
First, let's name the variables for the texts and circles:
var circles = svg.selectAll("circle")
//etc...
var texts = svg.selectAll("text")
//etc...
Then, inside the circles mouseover function, we filter the texts that have the same colour attribute:
.on("mouseover", function(d){
d3.select(this).style("stroke", "black").style("stroke-width", 2);
var tempTexts = texts.filter(function(e){
return e.colour === d.colour
});
tempTexts.style("opacity", 1);
});
This is your updated fiddle: https://jsfiddle.net/wxh95e9u/
I'd like to be able to both zoom and mouseover an element. Included is an example followed by more details about the scenario.
https://jsfiddle.net/pkerpedjiev/ny5ob3h2/4/
var svg = d3.select('svg')
var zoom = d3.behavior.zoom()
.on('zoom', draw)
svg.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 400)
.attr('height', 400)
.attr('fill', 'transparent')
.call(zoom)
var xScale = d3.scale.linear()
.domain([0, 10])
.range([0,10])
zoom.x(xScale)
svg.append('text')
.attr('x', 50)
.attr('y', 100)
.text('Hi there')
.attr('visibility', 'hidden')
svg.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 10)
//.attr('pointer-events', 'none')
.on('mouseover', function(d) {
svg.selectAll('text')
.attr('visibility', 'visible');
})
.on('mouseout', function(d) {
svg.selectAll('text')
.attr('visibility', 'hidden')
});
function draw() {
d3.selectAll('circle')
.attr('r', xScale(10));
}
The example just contains a circle and some text. The text is invisible unless the mouse is over the circle. If I scroll using the mouse wheel, the circle changes in size in response to the zoom behavior. If, however, the mouse is over the circle, zooming doesn't work.
Is there a way to fix this? Setting pointer-events to none on the circle fixes the zooming, but then the mouseover event doesn't get called.
Is there way to have both the circle's mouseover get called and be able to zoom while the mouse is over the circle?
Yes this is possible by giving the zoom on the circle also.
svg.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 10)
.call(zoom)//giving on circle also
//.attr('pointer-events', 'none')
.on('mouseover', function(d) {
svg.selectAll('text')
.attr('visibility', 'visible');
})
.on('mouseout', function(d) {
svg.selectAll('text')
.attr('visibility', 'hidden')
});
working example here
Hope this helps!
EDIT
If you have lot of elements and you don't like to attach the zoom listener to all the elements then you can attach the zoom to the main group which holds everything.
Like this:
var svg = d3.select('svg').attr("x",500).attr("y",500).append("g")
Attach zoom listener to the group.
svg.call(zoom);
Working code here
I am trying to draw a set of lines and circle points, but I cant figure out how to get the circles to work.
The line function needs an array of points, but for the circle it needs just the x/y of each point.
How do I append a circle (to the same group as the line), for each x/y point?
// Data join
var join = svg.selectAll("g")
.data(lineData)
// Enter
var group = join.enter()
.append("g");
group.append("path")
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
group.append('circle')
.attr("r", 10)
.attr('fill', 'blue');
// Update
join.select("path")
.attr('d', line);
join.select("circle")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); });
Full code is here: http://jsfiddle.net/dxxddvL4/1/
The basic pattern you need to use are nested selections -- for each line, there are multiple circles. It's easier to do the lines and circles separately, lines and g elements first:
var join = svg.selectAll("g")
.data(lineData);
// Enter
join.enter()
.append("g")
.append("path")
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
// Update
join.select("path")
.attr('d', line);
join.exit().remove();
The code is basically the same as yours, except that the appended g elements aren't saved in a separate selection and the exit selection is handled by removing the elements. Now the circles, along the same lines:
var circles = join.selectAll("circle")
.data(function(d) { return d; });
circles.enter()
.append('circle')
.attr("r", 10)
.attr('fill', 'blue');
circles.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); });
circles.exit().remove();
The first line here is the nested selection -- for each element in the array that denotes the line, we want a circle. Note that this is operating on the update selection of the g elements. This is ok because the elements in the enter selection are merged into the update selection when the g elements are appended. That is, even though we only handle the update selection, any newly-appended elements are included in this.
After that, we handle the selections as usual. The enter selection has elements appended, the update selection sets the coordinates, the exit selection removes elements. All the magic happens in that first line, where we tell D3 to, for each g element at the top level, bind each point from the line to any circles underneath.
Complete example here.
I'm having an issue with mouseover and mouseout events in d3.
I have built an area graph and at each "data point" I have appended a circle. These circles are hidden (by setting opacity to 0) on load. Then, when you mouse over an area, it shows the circles relating to that layer.
I now need to make it so that when you hover over a circle, it grows a bit larger. However, when mousing over the circle, it triggers the mouseout event for the area (hiding the circles).
Is there any way that the events can be set so that the mouseout event doesn't fire until the mouse enters another layer or leaves the svg entirely?
Here is the current transition code that I have:
var svg = d3.select('svg');
svg.selectAll('.data-circles')
.attr('opacity', 0);
svg.selectAll('.layer')
.attr('opacity', 1)
.on('mouseover', function (d, i) {
svg.selectAll('.data-circles')
.transition()
.duration(250)
.attr('opacity', function (d, j) {
return j == i ? 1 : 0;
});
}).on('mouseout', function (d, i) {
console.log(d, i);
svg.selectAll('.data-circles')
.transition()
.duration(250)
.attr('opacity', 0);
});
var dataCircle = svg.selectAll('.data-circle');
dataCircle.on('mouseover', function (d, i) {
d3.select(this)
.transition()
.duration(500)
.attr('r', 8)
.attr('stroke-width', 4);
}).on('mouseout', function () {
d3.select(this)
.transition()
.duration(500)
.attr('r', 4)
.attr('stroke-width', 2);
});
And here is a link to the code on Jsfiddle
Thanks,
You can simply remove the mouseout handler (and rename mouseover to mouseenter for efficiency):
.on('mouseenter', function (d, i) {
svg.selectAll('.data-circles')
.transition()
.duration(250)
.attr('opacity', function (d, j) {
return j == i ? 1 : 0;
});
});
This sets the correct opacity for the correct circles and doesn't interfere with the highlighting of individual circles. The difference to your previous interaction model is that the circles remain there even if the cursor leaves the plot area -- you could fix that by attaching a mouseout handler to the plot area/SVG.
Complete demo here.