svg circle too small for mouseevent - javascript

I am working on a D3 Graph. My graph has circles with no fill color which look like this:
var circles = svg.selectAll("circle")
.data(x.ticks(6))
.enter().append("circle")
.attr("r", function (d) { return radius(d); })
.style("fill", "none")
.style("stroke", "black")
.style("stroke-dasharray", "3,3")
.style("stroke-width", "1px")
I have added a mouse event to that circle so that whenever someone hovers over it, the circle would get larger width:
.on('mouseenter', function (a, i) {
d3.select(this)
.style("stroke-dasharray", "0")
.style("stroke-width", "3px")
})
However, the width of the circle is too small to be easily touchable without extra effort. What would be a good and efficient solution to make the hit slop bigger so that the mouseevent would trigger with ease?

The best option is control the minimum circle radius(the radius where it is easily touchable).That means, if a circle is not easily touchable when radius < 5px then keep minimum radius as 5px.

Related

d3 5+ - Appending circles about a semi-circle or arc

Suppose we wanted to make a list-like visual. Setting the y logic for the circles can be as simple as:
var data = [0,1,2,3,4,5,6,7,8,9];
var yScale = d3.scaleLinear()
.range([height,0])
.domain([0,9]);
svg.selectAll(null)
.data(data)
.enter()
.append('circle')
.attr('cy', function(d) { return yScale(d) })
.attr('cx', 100)
.attr('r', 10)
.style('fill', "#a6a6a6");
However, suppose we wanted to go for some style points and arrange the circles not in a blocky / tabular arrangement but rather arrange them about a circle or arc. I had this result in mind (only concerned with the outer circles):
While I think d3 does have trigonometric functions, I have never seen them used in pixel coordinates. I'd imagine the pseudo-code to be something like:
var semiCircleScale = d3.?????
.range([250 degrees, 110 degrees])
.domain([0,9]);
svg.selectAll(null)
.data(data)
.enter()
.append('circle')
.attr('cy', function(d) { return semiCircleScale(d) })
.attr('cx', 100)
.attr('r', 10)
.style('fill', "#a6a6a6");
Question
Is anyone familiar with using circle / arc scales for use with x,y logic for appending shapes? Or is there an easier/less-math-intensive way?
So the idea is to create 2 different path of arc and then calculate the circumference and place the circles along with.
d3.svg.arc()
.append("path")
.attr("d", arc1)
Here is a fiddle link with minimum code to establish the idea
https://jsfiddle.net/Dibyanshu/g03p6sxj/

Add several map elements with d3.js to a google map

I'm working on a map based on a mbostock example (full example is at https://bl.ocks.org/mbostock/899711). It superimposes several d3.js circles at various points on a google map. I'd like to add a second set of circles slightly offcentered from the original points, so that each point has a red and a blue circle.
I'm not sure about how the circles themselves are being drawn, though. There is a transform function that is applied:
function transform(d) {
d = new google.maps.LatLng(d.value[1], d.value[0]);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", (d.x - padding) + "px")
.style("top", (d.y - padding) + "px");
}
and applied to each point using each. If I attempt to draw both circles by simply adding another set of circles to the point where the circles are appended:
marker.append("circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.append("circle")
.attr("r", 4.5)
.attr("cx", padding + 30)
.attr("cy", padding + 30);
only one set of circles ends up being drawn. I'm guessing this has to do with the transform function only being applied to the last set of circles that is defined? How can I add another set of circles to the map?
Your code appends circles to circles. This results in invalid SVG, circles can't be children of circles.
Don't chain the .append.
marker.append("circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding);
marker.append("circle")
.attr("r", 4.5)
.attr("cx", padding + 30)
.attr("cy", padding + 30);

Add horizontal crosshair to d3.js chart

I am successful in getting crosshair in D3.js chart but issue is I am only getting vertical line, how do I add code for horizontal line as well?
Image of chart
JSFiddle code chart is not plotting in JSFiddle
Basically code to add vertical line crosshair is as below:-
var vertical = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "450px")
.style("top", "47px")
.style("bottom", "1px")
.style("left", "8px")
.style("background", "#000");
Can I add horizontal crosshair as well same way?
P.S. also wanted a way to keep this vertical line only in chart area, but is coming in whole body, i.e. empty area next to chart in right and left.
Your approach is too complicated. This is simpler:
First, create a transparent rectangle to get the mouse movements:
var transpRect = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "white")
.attr("opacity", 0);
Then, create the lines:
var verticalLine = svg.append("line")
.attr("opacity", 0)
.attr("y1", 0)
.attr("y2", height)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none");
var horizontalLine = svg.append("line")
.attr("opacity", 0)
.attr("x1", 0)
.attr("x2", width)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none");
Finally, position the lines on mousemove:
transpRect.on("mousemove", function(){
mouse = d3.mouse(this);
mousex = mouse[0];
mousey = mouse[1];
verticalLine.attr("x1", mousex).attr("x2", mousex).attr("opacity", 1);
horizontalLine.attr("y1", mousey).attr("y2", mousey).attr("opacity", 1)
}).on("mouseout", function(){
verticalLine.attr("opacity", 0);
horizontalLine.attr("opacity", 0);
});
Here is your fiddle: https://jsfiddle.net/xrf1ro1a/
PS: to avoid killing your tooltips, I put the mousemove both on the rectangle and on the svg as well, which has the undesirable effect of making the lines going outside the chart area. To avoid this, set pointer-events = none to the elements outside the chart area.

How to make circle to appear one after another using d3 transition?

I am following the circle example:
I created the circle below, and I wish to make the opacity transition be that as the data set updates, the circle will start appearing one after another. For example, if the data length is 5, then circle 1 appears, then circle 2, ... finally circle 5. And if the data is updated so its length is 2, then circle 1 appears, then circle 2 appears. How do I do this effect? So far, the transition() works on the data set uniformly.
circle.enter().append("circle")
.attr("class", "dot");
// Update (set the dynamic properties of the elements)
circle
.attr("r", 5)
.attr("cy", 20)
.attr("cx", function(d,i){return i*50;})
.attr("fill", "red");
svg.selectAll("circle")
.style("opacity", 0)
.transition()
.duration(1000)
.style("opacity", 1);
Problem:
Setting a delay for each element in a "transition" selection.
Solution:
Use delay() with function(d, i)
Instructions:
You have to add this after transition():
.delay(function(d,i){ return i * someNumber })
Where someNumber is the delay, in milliseconds, for each element.

How to update selection with new data in D3?

I'm trying to edit the data of created circles in D3. Below my code is pasted of me creating a lot of circles based on some data from graphData.
Supposed I'd want to re-arrange my circles Y position with a new dataset, by transitioning them to their new destinations. How would perform this task? I've tried using attr.("cy", function(d){return yScale(parseFloat(d))} ) to update my Y-coordinates by adding data(graphData[i], function(d){return d;}) with my new data, but this does not work.
You can take a look at my JSFiddle: http://jsfiddle.net/RBr8h/1/
Instead of the for-loop in the following code I've created circles on 2 ticks of my X-axis. I have 3 sets of data and I've used to of them in the example in the fiddle. I'd like to able to use the 3rd dataset instead of the 2 first ones on both circles.
var circle;
for(var i = 0;i < graphData.length;i++){
circle = SVGbody
.selectAll("circle")
.data(graphData[i], function(d){return d;})
.enter()
.append("circle")
.attr("cx",xScale(0))
.attr("cy", yScale(minAxisY))
.attr("r",4)
.style('opacity', 0)
.transition()
.duration(1000)
.attr("cx", function(d){
return spreadCircles(i);
})
//.attr("cy", function (d, i){ return yScale(i); })
.style('opacity', 1)
.transition()
.duration(1500)
.attr("cy", function(d){return yScale(parseFloat(d))} );
Thank you for your help in advance!
To put some flesh on Lars comment, here is a FIDDLE leveraging the enter/update/exit pattern to help you out. I have altered and simplified your code (and data) just enough to demonstrate the principle.
function updateCircles(dataset,color) {
var circle = SVGbody
.selectAll("circle")
.data(dataset, function(d) { return d; });
circle
.exit()
.transition().duration(750)
.attr("r", 0)
.remove();
circle
.enter()
.append("circle");
circle
.attr("cx",function(d){return xScale(100);})
.attr("cy",function(d){return yScale(parseFloat(d))})
.attr("r",0)
.transition().duration(1500)
.attr("r",5)
.style("fill", color);
};
Update fiddle with data keyed off by index...so, circles just have their position updated.

Categories

Resources