I have some circles/nodes of different radius and I have to connect them with paths having arrow ends.
Here's the code for the marker:
svg.append("svg:defs").selectAll("marker")
.data(["default"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 5)
.attr("refY", -1.5)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M1,-5L10,0L0,5");
I have stored the radius of circles in an array.
Here's the screen shot:
The arrow is actually "inside" the circles. How do I get the arrows to be at the surface of the circles?
This is an old question, but here is my solution if you want your arrowheads to be at the edge of your nodes instead of on top of or beneath them. My approach was also to draw the path connecting the nodes such that the end points were on the nodes' edges rather than at the nodes' centers. Starting from the Mobile Patent Suits example (http://bl.ocks.org/mbostock/1153292), I replaced the linkArc method with:
function linkArc(d) {
var sourceX = d.source.x;
var sourceY = d.source.y;
var targetX = d.target.x;
var targetY = d.target.y;
var theta = Math.atan((targetX - sourceX) / (targetY - sourceY));
var phi = Math.atan((targetY - sourceY) / (targetX - sourceX));
var sinTheta = d.source.r * Math.sin(theta);
var cosTheta = d.source.r * Math.cos(theta);
var sinPhi = d.target.r * Math.sin(phi);
var cosPhi = d.target.r * Math.cos(phi);
// Set the position of the link's end point at the source node
// such that it is on the edge closest to the target node
if (d.target.y > d.source.y) {
sourceX = sourceX + sinTheta;
sourceY = sourceY + cosTheta;
}
else {
sourceX = sourceX - sinTheta;
sourceY = sourceY - cosTheta;
}
// Set the position of the link's end point at the target node
// such that it is on the edge closest to the source node
if (d.source.x > d.target.x) {
targetX = targetX + cosPhi;
targetY = targetY + sinPhi;
}
else {
targetX = targetX - cosPhi;
targetY = targetY - sinPhi;
}
// Draw an arc between the two calculated points
var dx = targetX - sourceX,
dy = targetY - sourceY,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + sourceX + "," + sourceY + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY;
}
Note that this code expects an "r," or radius, attribute to be in the node data. To place the points of the arrows at the correct positions, I changed the refX and refY attributes so that the point of the arrow was at the edge of the node:
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 10)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
This is really funny; I just solved this problem yesterday.
What I did is to end the path at the edge of the node, not at the centre.
My case is more complicated because I use Bezier curves, not straight lines, but this might help you:
svg.append("svg:defs").selectAll("marker")
.data(["default"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -3 6 6")
.attr("refX", 5.0)
.attr("refY", 0.0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-2.0L5,0L0,2.0");
links
.attr("fill", "none")
.attr("d", function(d) {
var tightness = -3.0;
if(d.type == "straight")
tightness = 1000;
// Places the control point for the Bezier on the bisection of the
// segment between the source and target points, at a distance
// equal to half the distance between the points.
var dx = d.target.x - d.source.x;
var dy = d.target.y - d.source.y;
var dr = Math.sqrt(dx * dx + dy * dy);
var qx = d.source.x + dx/2.0 - dy/tightness;
var qy = d.source.y + dy/2.0 + dx/tightness;
// Calculates the segment from the control point Q to the target
// to use it as a direction to wich it will move "node_size" back
// from the end point, to finish the edge aprox at the edge of the
// node. Note there will be an angular error due to the segment not
// having the same direction as the curve at that point.
var dqx = d.target.x - qx;
var dqy = d.target.y - qy;
var qr = Math.sqrt(dqx * dqx + dqy * dqy);
var offset = 1.1 * node_size(d.target);
var tx = d.target.x - dqx/qr* offset;
var ty = d.target.y - dqy/qr* offset;
return "M" + d.source.x + "," + d.source.y + "Q"+ qx + "," + qy
+ " " + tx + "," + ty; // to "node_size" pixels before
//+ " " + d.target.x + "," + d.target.y; // til target
});
By the way; you'll have to do the same for the 'source' arrow head (I only have it at the target)
you may order the svg elements such that the circles will be rendered first, the lines with arrows thereafter (in d3 there is a .ordermethod, see here for details. for the record, the corrsponding part of the raphael api is discussed here).
I search online, none of the answer worked, so I made my own:
Here is the code:
//arrows
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 9)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "0.6");
//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
.data(forceData.links)
.enter().append("line")
.attr("class", "link")
.style("marker-end", "url(#suit)");
//Set up the force layout
var force = d3.layout.force()
.nodes(forceData.nodes)
.links(forceData.links)
.charge(-120)
.linkDistance(200)
.size([width, height])
.on("tick", tick)
.start();
function tick(){
link.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) {
return calculateX(d.target.x, d.target.y, d.source.x, d.source.y, d.target.radius);
})
.attr("y2", function (d) {
return calculateY(d.target.x, d.target.y, d.source.x, d.source.y, d.target.radius);
});
d3.selectAll("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
d3.select("#forcelayoutGraph").selectAll("text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; });
}
function calculateX(tx, ty, sx, sy, radius){
if(tx == sx) return tx; //if the target x == source x, no need to change the target x.
var xLength = Math.abs(tx - sx); //calculate the difference of x
var yLength = Math.abs(ty - sy); //calculate the difference of y
//calculate the ratio using the trigonometric function
var ratio = radius / Math.sqrt(xLength * xLength + yLength * yLength);
if(tx > sx) return tx - xLength * ratio; //if target x > source x return target x - radius
if(tx < sx) return tx + xLength * ratio; //if target x < source x return target x + radius
}
function calculateY(tx, ty, sx, sy, radius){
if(ty == sy) return ty; //if the target y == source y, no need to change the target y.
var xLength = Math.abs(tx - sx); //calculate the difference of x
var yLength = Math.abs(ty - sy); //calculate the difference of y
//calculate the ratio using the trigonometric function
var ratio = radius / Math.sqrt(xLength * xLength + yLength * yLength);
if(ty > sy) return ty - yLength * ratio; //if target y > source y return target x - radius
if(ty < sy) return ty + yLength * ratio; //if target y > source y return target x - radius
}
Related
I have .attr that create my link paths in d3 as below, Lines 42 in the demo:
link.each(function (d){})
.attr('x1', function (d) {
return d.source.x;
})
.attr('y1', function (d) {
return d.source.y;
})
.attr('x2', function (d) {
return d.target.x;
})
.attr('y2', function (d) {
return d.target.y;
});
The above draws my path links. I've changed this to calculate making the link paths smaller. However, there is a lot of repeated logic and not sure how to call a function to return my the values required. As below:
link.attr("x1", function(d) {
// Total difference in x and y from source to target
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
let pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
// x and y distances from center to outside edge of target node
let offsetX = (diffX * 40) / pathLength;
return d.source.x + offsetX;
}).attr("y1", function(d) {
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
let pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
let offsetY = (diffY * 40) / pathLength;
return d.source.y + offsetY;
}).attr("x2", function(d) {
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
let pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
let offsetX = (diffX * 40) / pathLength;
return d.target.x - offsetX;
}).attr("y2", function(d) {
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
let pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
let offsetY = (diffY * 40) / pathLength;
return d.target.y - offsetY;
})
It returns offsetX for d.source.x/d.target.x values and offsetY for d.source.y/d.target.y.
Ideally i dont want all this repeated logic and have tried doing a .call() on the link which goes into a function but then I dont know how to return the result into the attributes themselves e.g.
.attr('x1', function (d) {
return d.source.x; //function return from .call()
})
I've also tried putting the function call within the above attribute but get an error of "is not a function" e.g
.attr('x1', function (d) {
return this.myNewPathFunction(d);
})
Lines 42 in the demo
Your objective is both writing less lines of repetitive code and reducing the amount of calculations needed.
One of the idiomatic D3 solutions is using selection.each();
Thus, in your case:
link.each(d, i, n) {
// Total difference in x and y from source to target
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
let pathLength = Math.sqrt(diffX * diffX + diffY * diffY);
// x and y distances from center to outside edge of target node
let offsetX = (diffX * 40) / pathLength;
let offsetY = (diffY * 40) / pathLength;
d3.select(n[i])
.attr("x1", d.source.x + offsetX)
.attr("y1", d.source.y + offsetY)
.attr("x2", d.target.x - offsetX)
.attr("y2", d.target.y - offsetY);
};
Note that the computation of offsetX and offsetY happens only once per element. In your specific case it's not a heavy computation, but when it is it's a good idea reducing the burden on the browser.
You could move your logic to a function like so:
const coordinate = (position, d, index, nodes) => {
// Total difference in x and y from source to target
let diffX = d.target.x - d.source.x;
let diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
let pathLength = Math.sqrt(diffX * diffX + diffY * diffY);
// x and y distances from center to outside edge of target node
let offsetX = (diffX * 40) / pathLength;
let offsetY = (diffY * 40) / pathLength;
if (position === 'x1') return d.source.x + offsetX;
if (position === 'y1') return d.source.y + offsetY;
if (position === 'x2') return d.target.x - offsetX;
if (position === 'y2') return d.target.y - offsetY;
};
link
.attr('x1', (d, i, nodes) => coordinate('x1', d, i, nodes))
.attr('y1', (d, i, nodes) => coordinate('y1', d, i, nodes))
.attr('x2', (d, i, nodes) => coordinate('x2', d, i, nodes))
.attr('y2', (d, i, nodes) => coordinate('y2', d, i, nodes));
I am working on a project with d3.js where I want a visualisation to centre on the screen. My current solution works perfectly on desktop screens, even when resizing, but when I load the webpage on my iPhone screen, the visualisation is no longer centred. The target div for this visualisation is:
<div id="grades_circular" class="my_dataviz"></div>
The css to style is:
.my_dataviz {
display: flex;
justify-content: center;}
The JavaScript code for the visualisation is :
const grades_margin = {top: 30, right: 0, bottom: 70, left: 0},
grades_width = 460 - grades_margin.left - grades_margin.right,
grades_height = 460 - grades_margin.top - grades_margin.bottom;
innerRadius = 50,
outerRadius = Math.min(grades_width, grades_height) / 2;
const grades_svg = d3.select("#grades_circular")
.append("svg")
.attr("width", grades_width + grades_margin.left + grades_margin.right)
.attr("height", grades_height + grades_margin.top + grades_margin.bottom)
.append("g")
.attr("transform", `translate(${grades_width/2+grades_margin.left}, ${grades_height/2+grades_margin.top})`);
d3.csv("https://raw.githubusercontent.com/ben-austin27/ben-austin27.github.io/main/data/results.csv").then( function(grades_data) {
const grades_x = d3.scaleBand()
.range([0, 2 * Math.PI]) // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
.align(0) // This does nothing
.domain(grades_data.map(d => d.module)); // The domain of the X axis is the list of states.
const grades_y = d3.scaleRadial()
.range([innerRadius, outerRadius]) // Domain will be define later.
.domain([40, 100]); // Domain of Y is from 0 to the max seen in the data
// Add the bars
bars = grades_svg.append("g")
.selectAll("path")
.data(grades_data)
.join("path")
.attr("fill", d => "#" + d.color )
.attr("d", d3.arc() // imagine your doing a part of a donut plot
.innerRadius(innerRadius)
.outerRadius(innerRadius+0.05)//d => grades_y(d['grade'])
.startAngle(d => grades_x(d.module))
.endAngle(d => grades_x(d.module) + grades_x.bandwidth())
.padAngle(0.05)
.padRadius(innerRadius))
modules = grades_svg.append("g")
.selectAll("g")
.data(grades_data)
.join("g")
.attr("text-anchor", function(d) { return (grades_x(d.module) + grades_x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; })
.attr("transform", function(d) { return "rotate(" + ((grades_x(d.module) + grades_x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+"translate(" + (innerRadius+10) + ",0)"; })//
.append("text")
.text(function(d){return(d.module)})
.attr("transform", function(d) { return (grades_x(d.module) + grades_x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; })
.style("font-size", "11px")
.attr("alignment-baseline", "middle")
grades = grades_svg.append("g")
.selectAll("g")
.data(grades_data)
.join("g")
.attr("text-anchor", function(d) { return (grades_x(d.module) + grades_x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; })
.attr("transform", function(d) { return "rotate(" + ((grades_x(d.module) + grades_x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+"translate(" + (grades_y(d['grade'])+7) + ",0)"; })//
.append("text")
.text(function(d){return(d.grade)})
.attr("transform", function(d) { return (grades_x(d.module) + grades_x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; })
.style("font-size", "11px")
.attr("alignment-baseline", "middle")
function update_bars() {
d3.selectAll("path")
.transition()
.ease(d3.easePolyInOut.exponent(3)) //https://observablehq.com/#d3/easing-animations
.duration(2000)
.attr("d", d3.arc() // imagine your doing a part of a donut plot
.innerRadius(innerRadius)
.outerRadius(d => grades_y(d['grade']))
.startAngle(d => grades_x(d.module))
.endAngle(d => grades_x(d.module) + grades_x.bandwidth())
.padAngle(0.05)
.padRadius(innerRadius))
// alter opactity of the labeling as well, after 2 seconds
}
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
// the element to scroll inside
triggerElement: '#grades_circular'
})
.on('enter', function(e) {
update_bars(e);
}).addTo(controller)
});
Thanks!
I wanted to draw an arc from an array of points like this:
var points = [
[
51.93326250000001,
21.4375
],
[
36.72733749999999,
40.603550000000002
],
[
21.527537500000008,
21.4144
]
];
I tried with d3.line(), d3.curveBasis() and d3.curveBundle.beta(1).
var arcPath = d3.line()
.x(function (d) {
return d[0];
})
.y(function (d) {
return d[1];
})
.curve(d3.curveBasis);
var arc = node.append('path').attr("d", arcPath(points));
But it is drawing a curved line:
which is not what I am looking for. I would like an arc instead:
I don't understand how to use this:
var arc = d3.arc()
.innerRadius(180)
.outerRadius(240)
.startAngle(0);
with my points.
In order to draw an arc, you need to know the center coordinates of its associated circle and its radius.
In this case, as your arc (part of circle) is defined by the coordinates of 3 points, you need to compute the center of the circle defined by these 3 points:
var points = [
[
51.93326250000001,
21.4375
],
[
36.72733749999999,
40.603550000000002
],
[
21.527537500000008,
21.4144
]
];
function calculateCircleCenter(A, B, C) {
var yDelta_a = B[1] - A[1];
var xDelta_a = B[0] - A[0];
var yDelta_b = C[1] - B[1];
var xDelta_b = C[0] - B[0];
var center = [];
var aSlope = yDelta_a / xDelta_a;
var bSlope = yDelta_b / xDelta_b;
center[0] = (aSlope*bSlope*(A[1] - C[1]) + bSlope*(A[0] + B[0]) - aSlope*(B[0]+C[0]) )/(2* (bSlope-aSlope) );
center[1] = -1*(center[0] - (A[0]+B[0])/2)/aSlope + (A[1]+B[1])/2;
return center;
}
function distance(A, B) {
var a = A[0] - B[0];
var b = A[1] - B[1];
return Math.sqrt(a*a + b*b);
}
var center = calculateCircleCenter(points[0], points[1], points[2]);
var radius = distance(points[0], center);
var svg = d3.select("svg").attr("width", 200).attr("height", 200);
// The circle
svg.append("circle")
.attr("cx", center[0])
.attr("cy", center[1])
.attr("r", radius)
.attr("fill", "white")
.attr("stroke", "black");
var startAngle = Math.atan2(points[0][1] - center[1], points[0][0] - center[0]) + 0.5 * Math.PI;
var endAngle = Math.atan2(center[1] - points[2][1], center[0] - points[2][0]) + 1.5 * Math.PI;
var arc = d3.arc().innerRadius(radius).outerRadius(radius);
var sector = svg.append("path")
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke", "blue")
.attr("d", arc({ "startAngle": startAngle, "endAngle": endAngle }))
.attr("transform", "translate(" + center[0] + "," + center[1] + ")");
// The 3 points:
svg.selectAll("small_circle")
.data(points)
.enter().append("circle")
.attr("cx", function (d) { return d[0]; })
.attr("cy", function (d) { return d[1]; })
.attr("r", 2)
.attr("fill", "red");
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
Concerning the maths:
You can use whatever method to compute the center of a circle defined by 3 points. Here is used this one.
You can then compute the radius of this circle by computing the distance between this center and one of the three points.
And you will also need to know the start and end angles of the arc, based on the angle between the first point and the circle's center and the angle between the last point and the circle's center. This can be achieved using this formula.
Concerning the drawing:
Here is how you can draw an arc with d3.js:
var arc = d3.arc().innerRadius(radius).outerRadius(radius);
var sector = svg.append("path")
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke", "blue")
.attr("d", arc({ startAngle: 0.5 * Math.PI, endAngle: 1.5 * Math.PI }))
.attr("transform", "translate(" + center[0] + "," + center[1] + ")");
An arc is defined by its radius. More specifically its innerRadius and outerRadius. In our case it's the same thing.
We then specify the center of the arc by translating the arc:
.attr("transform", "translate(" + center[0] + "," + center[1] + ")");
And we specify the start and end angles of the arc this way:
.attr("d", arc({ "startAngle": startAngle, "endAngle": endAngle }))
where startAngle and endAngle are computed based on first/last points and the center:
var startAngle = Math.atan2(points[0][1] - center[1], points[0][0] - center[0]) + 0.5 * Math.PI;
var endAngle = Math.atan2(center[1] - points[2][1], center[0] - points[2][0]) + 1.5 * Math.PI;
Hello I would like to know how it would be possible two make it that two circles change color when they overlap. Preferably the section that is overlapped would become white since its meant to represent sets.
var canvas = d3.select("canvas"),
context = canvas.node().getContext("2d"),
width = canvas.property("width"),
height = canvas.property("height"),
radius = 32;
var circles = d3.range(4).map(function(i) {
return {
index: i,
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
render();
canvas.call(d3.drag()
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
.on("start.render drag.render end.render", render));
function render() {
context.clearRect(0, 0, width, height);
for (var i = 0, n = circles.length, circle; i < n; ++i) {
circle = circles[i];
context.beginPath();
context.moveTo(circle.x + radius, circle.y);
context.arc(circle.x, circle.y, radius, 0, 2 * Math.PI);
context.fillStyle = color(circle.index);
context.fill();
if (circle.active) {
context.lineWidth = 2;
context.stroke();
}
}
}
function dragsubject() {
for (var i = circles.length - 1, circle, x, y; i >= 0; --i) {
circle = circles[i];
x = circle.x - d3.event.x;
y = circle.y - d3.event.y;
if (x * x + y * y < radius * radius) return circle;
}
}
function dragstarted() {
circles.splice(circles.indexOf(d3.event.subject), 1);
circles.push(d3.event.subject);
d3.event.subject.active = true;
}
function dragged() {
d3.event.subject.x = d3.event.x;
d3.event.subject.y = d3.event.y;
}
function dragended() {
d3.event.subject.active = false;
}
<canvas width="800" height="500"></canvas>
<script src="//d3js.org/d3.v4.min.js"></script>
My ideal solution would be something that allow me to change the color of the overlapping section to another color to represent the intersection between 2 sets.
Thank you in advance
Edit: some updates have been made however Ive only found how to do the coloring for static elements instead of moving
var x1 = 100,
y1 = 100,
x2 = 150,
y2 = 150,
r = 70;
var svg = d3.select('svg')
.append('svg')
.attr('width', 500)
.attr('height', 500);
svg.append('circle')
.attr('cx', x1)
.attr('cy', y1)
.attr('r', r)
.style('fill', 'steelblue')
.style("fill-opacity",0.5)
.style("stroke","black");
svg.append('circle')
.attr('cx', x2)
.attr('cy', y2)
.attr('r', r)
.style('fill', 'orange')
.style("fill-opacity",0.5)
.style("stroke","black");
var interPoints = intersection(x1, y1, r, x2, y2, r);
svg.append("g")
.append("path")
.attr("d", function() {
return "M" + interPoints[0] + "," + interPoints[2] + "A" + r + "," + r +
" 0 0,1 " + interPoints[1] + "," + interPoints[3]+ "A" + r + "," + r +
" 0 0,1 " + interPoints[0] + "," + interPoints[2];
})
.style('fill', 'red')
.style("fill-opacity",0.5)
.style("stroke","black");
function intersection(x0, y0, r0, x1, y1, r1) {
var a, dx, dy, d, h, rx, ry;
var x2, y2;
/* dx and dy are the vertical and horizontal distances between
* the circle centers.
*/
dx = x1 - x0;
dy = y1 - y0;
/* Determine the straight-line distance between the centers. */
d = Math.sqrt((dy * dy) + (dx * dx));
/* Check for solvability. */
if (d > (r0 + r1)) {
/* no solution. circles do not intersect. */
return false;
}
if (d < Math.abs(r0 - r1)) {
/* no solution. one circle is contained in the other */
return false;
}
/* 'point 2' is the point where the line through the circle
* intersection points crosses the line between the circle
* centers.
*/
/* Determine the distance from point 0 to point 2. */
a = ((r0 * r0) - (r1 * r1) + (d * d)) / (2.0 * d);
/* Determine the coordinates of point 2. */
x2 = x0 + (dx * a / d);
y2 = y0 + (dy * a / d);
/* Determine the distance from point 2 to either of the
* intersection points.
*/
h = Math.sqrt((r0 * r0) - (a * a));
/* Now determine the offsets of the intersection points from
* point 2.
*/
rx = -dy * (h / d);
ry = dx * (h / d);
/* Determine the absolute intersection points. */
var xi = x2 + rx;
var xi_prime = x2 - rx;
var yi = y2 + ry;
var yi_prime = y2 - ry;
return [xi, xi_prime, yi, yi_prime];
}
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<svg width="500" height="500"></svg>
^This works for statics
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(4).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.style("fill-opacity",0.3)
.style("stroke","black")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 60)
.style("fill", function(d, i) { return color(i); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("active", false);
}
<svg width="500" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
^This is my moving circles that I would like to add said effect on.
Is there any way to combine the two codes to achieve this ?
Thanks again
You can use the intersection function of your static approach (second snippet) inside the dragged function of your dynamic approach (third snippet).
First of all, let's create 2 groups, so the "intersection" path will always be in front of the circles:
var g1 = svg.append("g");
var g2 = svg.append("g");
Now to the important part.
Inside the dragged function, get the position of the other (non-dragged) circle:
var otherCircle = circles.filter(function(e, j) {
return i !== j;
}).datum();
If you have more than two circles you'll have to refactor this, but my demo below has just two circles, so let's move on.
Then, check if they overlap:
Math.hypot(d.x - otherCircle.x, d.y - otherCircle.y) < 2 * radius
If they do, call intersection, and set the path's d attribute:
var interPoints = intersection(d.x, d.y, radius, otherCircle.x, otherCircle.y, radius);
path.attr("d", function() {
return "M" + interPoints[0] + "," + interPoints[2] + "A" + radius + "," + radius +
" 0 0,1 " + interPoints[1] + "," + interPoints[3] + "A" + radius + "," + radius +
" 0 0,1 " + interPoints[0] + "," + interPoints[2];
})
If they don't, erase the path:
path.attr("d", null)
Here is the working demo:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 60;
var data = d3.range(2).map(function(d, i) {
return {
x: i ? 200 : 400,
y: 150
};
});
var g1 = svg.append("g");
var g2 = svg.append("g");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10);
var circles = g1.selectAll("circle")
.data(data)
.enter().append("circle")
.style("fill-opacity", 0.3)
.style("stroke", "black")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", radius)
.style("fill", function(d, i) {
return color(i);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var path = g2.append("path")
.style("fill", "white")
.style("stroke", "black")
.attr("d", null);
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d, i) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
var otherCircle = circles.filter(function(e, j) {
return i !== j;
}).datum();
if (Math.hypot(d.x - otherCircle.x, d.y - otherCircle.y) < 2 * radius) {
var interPoints = intersection(d.x, d.y, radius, otherCircle.x, otherCircle.y, radius);
path.attr("d", function() {
return "M" + interPoints[0] + "," + interPoints[2] + "A" + radius + "," + radius +
" 0 0,1 " + interPoints[1] + "," + interPoints[3] + "A" + radius + "," + radius +
" 0 0,1 " + interPoints[0] + "," + interPoints[2];
})
} else {
path.attr("d", null)
}
}
function dragended(d) {
d3.select(this).classed("active", false);
}
function intersection(x0, y0, r0, x1, y1, r1) {
var a, dx, dy, d, h, rx, ry;
var x2, y2;
/* dx and dy are the vertical and horizontal distances between
* the circle centers.
*/
dx = x1 - x0;
dy = y1 - y0;
/* Determine the straight-line distance between the centers. */
d = Math.sqrt((dy * dy) + (dx * dx));
/* Check for solvability. */
if (d > (r0 + r1)) {
/* no solution. circles do not intersect. */
return false;
}
if (d < Math.abs(r0 - r1)) {
/* no solution. one circle is contained in the other */
return false;
}
/* 'point 2' is the point where the line through the circle
* intersection points crosses the line between the circle
* centers.
*/
/* Determine the distance from point 0 to point 2. */
a = ((r0 * r0) - (r1 * r1) + (d * d)) / (2.0 * d);
/* Determine the coordinates of point 2. */
x2 = x0 + (dx * a / d);
y2 = y0 + (dy * a / d);
/* Determine the distance from point 2 to either of the
* intersection points.
*/
h = Math.sqrt((r0 * r0) - (a * a));
/* Now determine the offsets of the intersection points from
* point 2.
*/
rx = -dy * (h / d);
ry = dx * (h / d);
/* Determine the absolute intersection points. */
var xi = x2 + rx;
var xi_prime = x2 - rx;
var yi = y2 + ry;
var yi_prime = y2 - ry;
return [xi, xi_prime, yi, yi_prime];
}
svg {
background-color: wheat;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="600" height="300"></svg>
SVG mix-blend-mode hover from screen to normal
This isn't exactly what you're looking for since it doesn't let you programmatically control the color of intersecting segments, but CSS mix-blend-mode is a very simple solution I've used with d3. I've tried to accomplish the same thing but ran into performance problems calculating intersections on animating large datasets. Compatibility may be a concern if this needs to work in IE/ Edge, but otherwise most modes are supported in Chrome, Firefox, and Safari (even mobile).
Here's a good guide with examples on d3 as well and a simplified Codepen snippet.
Otherwise it seems like you've already found D3.js - detect intersection area. To get that to work with drag, you'll need to write the calculations to determine which circles are overlapping, then calculate their intersection area.
I'm using d3 to draw a pie with radio button to change the paths showed. My problem is to recalculate the label position based on the new paths. On load the labels are drawn correctly but on click the position still the same of first load.
I think that the problem is that the g's take only the first data value and i don't know how to say to take the current data values.
The function that draw the labels is
//Labels
d3.selectAll("g").select("text").transition()
.ease("linear")
.duration(500)
.style("opacity", 0).remove();
svg.selectAll("g").append("text")
.attr("transform", function (d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x * x + y * y);
return "translate(" + (x / h * labelr) + ',' +
(y / h * labelr) + ")";
})
.attr("dy", ".35em")
.style("opacity", 0)
.style("fill", "#000")
.style("font-size", 12)
.attr("text-anchor", function (d) {
// are we past the center?
return (d.endAngle + d.startAngle) / 2 > Math.PI ?
"end" : "start";
})
.text(function (d) { return d.data.label; })
.transition()
.ease("linear")
.delay(1000)
.duration(500)
.style("opacity", 1);
For more info see https://jsfiddle.net/w0ckw4tb/
Thanks
Just apply new data binding before you append new text nodes:
svg.selectAll("g").data(pie) // <== !!!
.append("text")
.attr("transform" ...
If you did not do it, this code:
.attr("transform", function (d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x * x + y * y);
return "translate(" + (x / h * labelr) + ',' +
(y / h * labelr) + ")";
})
returns the same value for transform attribute so the labels remain at the same place.
Check working fiddle.