I use http://d3pie.org/#docs-settings
But there is no such parameter as the distance from the center to the internal labels.
Can someone tried to do it?
I want to move the internal labels closer to the outer edge of the circle.
Thank you so much.
now so:
need:
You can position the labels by defining a new arc as suggested in https://stackoverflow.com/a/8270668/2314737 and then applying the centroid function.
I defined a new arc newarc with an inner radius equal to 2/3 of the outer radius.
var newarc = d3.svg.arc()
.innerRadius(2 * radius / 3)
.outerRadius(radius);
Here's the JS code:
var width = 300;
var height = 300;
var svg = d3.select("body").append("svg");
svg.attr("width", width)
.attr("height", height);
var dataset = [11, 13, 18, 25, 31];
var radius = width / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius);
var pie = d3.layout.pie();
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + radius + ", " + radius + ")");
//Draw arc paths
var color = d3.scale.category10();
arcs.append("path")
.attr("fill", function (d, i) {
console.log(d);
return color(i);
})
.attr("stroke", "white")
.attr("d", arc);
var newarc = d3.svg.arc()
.innerRadius(2 * radius / 3)
.outerRadius(radius);
// Place labels
arcs.append("text")
.attr("transform", function (d) {
return "translate(" + newarc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr("fill", "white")
.text(function (d) {
return d.value + "%";
});
Here is a working demo: http://jsfiddle.net/user2314737/kvz8uev8/2/
I decided to enroll in another way.
I added my property in the object and function of positioning inner labels in D3pie file d3pie.js
This function is located on the line - 996 d3pie.js
positionLabelGroups: function(pie, section) {
d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
.style("opacity", 0)
.attr("transform", function(d, i) {
var x, y;
if (section === "outer") {
x = pie.outerLabelGroupData[i].x;
y = pie.outerLabelGroupData[i].y;
} else {
var pieCenterCopy = extend(true, {}, pie.pieCenter);
// now recompute the "center" based on the current _innerRadius
if (pie.innerRadius > 0) {
var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });
var newCoords = math.translate(pie.pieCenter.x, pie.pieCenter.y, pie.innerRadius, angle);
pieCenterCopy.x = newCoords.x;
pieCenterCopy.y = newCoords.y;
//console.log('i ='+i , 'angle='+angle, 'pieCenterCopy.x='+pieCenterCopy.x, 'pieCenterCopy.y='+pieCenterCopy.y);
}
var dims = helpers.getDimensions(pie.cssPrefix + "labelGroup" + i + "-inner");
var xOffset = dims.w / 2;
var yOffset = dims.h / 4; // confusing! Why 4? should be 2, but it doesn't look right
// ADD VARAIBLE HERE !!! =)
var divisor = pie.options.labels.inner.pieDistanceOfEnd;
x = pieCenterCopy.x + (pie.lineCoordGroups[i][0].x - pieCenterCopy.x) / divisor;
y = pieCenterCopy.y + (pie.lineCoordGroups[i][0].y - pieCenterCopy.y) / divisor;
x = x - xOffset;
y = y + yOffset;
}
return "translate(" + x + "," + y + ")";
});
},
I add var divisor = pie.options.labels.inner.pieDistanceOfEnd;
Then I spotted this property devoltnyh the configuration file bhp and passed for plotting parameters.
inner: {
format: "percentage",
hideWhenLessThanPercentage: null,
pieDistanceOfEnd : 1.8
},
Meaning pieDistanceOfEnd: 1 hang tag on the outer radius of the chart
value pieDistanceOfEnd: 1.25 turn them slightly inward ....
You can play these parameters and to achieve the desired option.
In d3pie.js look for the function positionLabelGroups. In this function both labels (outer and inner) are positioned.
To modify the distance from the center you can play with the x,y here:
x = pieCenterCopy.x + (pie.lineCoordGroups[i][0].x - pieCenterCopy.x) / 1.8;
y = pieCenterCopy.y + (pie.lineCoordGroups[i][0].y - pieCenterCopy.y) / 1.8;
What I did was decreasing the 1.8 to 1.2 and obtained what youre looking for. Dont know what the other vars do, but you can study the code to figure it out
Related
I am trying to create a circle and then have a radial linear scale to run along the circumference of that circle. It would be ideal to have the domain of this custom scale to be easily configurable. I think the snippet below gets me pretty close, but the rotate logic is hard to map out. The result should be ticks that represent each item in the (scale/dummy) data array. In this case, 0 to 50:
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
graphGroup.append('circle').attr('r',30).attr('cx',0).attr('cy',0).style('fill',"#003366");
var axisG = graphGroup.selectAll(null)
.data(d3.range(0, 60, 10))
.enter()
.append("g")
.attr("transform", function(d,i) {
if (i<3) {
return "rotate(" + (-90 + (d * 180)) + ")";
}
if (i>3) {
return "rotate(" + (-90 + (d * 180)) + ")";
}
});
axisG.append("line")
.attr("x1", 40 - 4)
.attr("x2", 40 + 4)
.style("stroke", "black");
<script src="https://d3js.org/d3.v5.min.js"></script>
As we can see, the ticks don't get spaced correctly, and wind up all in the same place. Not sure why I can't append the tick lines in a way that follows the granularity of the data in the data() portion of axisG.
In other words, imagine the circle as going from 0 to 50 about its circumference (0-50 is the spread of my data). 0 and 50 would both occur at 12 o'clock (if it were a clock). Since we are moving in increments of 10, 10 would be 72 degrees from 12 o'clock, 20 would be 144 and so forth.
Question
What rotate logic would be needed to ensure that ticks are appended as desired? (appending lines at various angles/orientations depending on which tick value / which degree in the overall circle).
You're pretty close, but you need to translate numbers to degrees in some way. For instance, you could make a variable called amountPerRevolution and set it to 50 if you want it to have 50 for each revolution, then change your transform function to:
var amountPerRevolution = 50;
//...
.attr("transform", function(d) {
return "rotate(" + (-90 + (d * 360) / amountPerRevolution) + ")";
});
Alternatively, a more d3 idiomatic way of doing this is to use a linear scale:
var degreeScale = d3.scaleLinear([0, 50], [-90, 270]);
//...
.attr("transform", function(d) {
return "rotate(" + degreeScale(d) + ")";
});
Snippet:
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var amountPerRevolution = 50;
var degreeScale = d3.scaleLinear([0, 50], [-90, 270]);
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
graphGroup.append('circle').attr('r',30).attr('cx',0).attr('cy',0).style('fill',"#003366");
var axisG = graphGroup.selectAll(null)
.data(d3.range(0, 60, 10))
.enter()
.append("g")
.attr("transform", function(d) {
// return "rotate(" + degreeScale(d) + ")";
return "rotate(" + (-90 + (d * 360) / amountPerRevolution) + ")";
});
axisG.append("line")
.attr("x1", 40 - 4)
.attr("x2", 40 + 4)
.style("stroke", "black");
<script src="https://d3js.org/d3.v5.min.js"></script>
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;
So, I'm basically trying to make a multilevel circular partition (aka sunburst diagram) with D3.js (v4) and a JSON data.
I placed some labels, which must have different angles depending of their levels (circles) on the partition :
- Level < 3 must be curved and "follow" the arc radius.
- level == 3 must be straight and perpendicular of the arc radius.
I didn't use textPath tags, because I'm not really experienced in SVG and it looks overly complicated to me, and I don't really know how to use it.
here's my code (without the JSON but this is a really classical one, I can add a part of it if it is needed):
var width = 800;
var height = 800;
var radius = 400;
var formatNumber = d3.format(",d");
var x = d3.scaleLinear().range([0, 2 * Math.PI]);
var y = d3.scaleSqrt().range([0, radius]);
var arc = d3.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x0))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); })
.innerRadius(function(d) { return setRadius("inner", d.data.level); })
.outerRadius(function(d) { return setRadius("outer", d.data.level); });
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + (height/2) + ")");
var hierarchy = d3.hierarchy(dataset)
.sum(function(d) { return d.size; });
var partition = d3.partition();
svg.selectAll("path")
.data(partition(hierarchy).descendants())
.enter().append("path")
.attr("id", function(d, i){ return "path" + i; })
.attr("d", arc)
.attr("stroke", "white")
.attr("stroke-width", "1px")
.style("fill", function(d) { return (d.data.color) ? d.data.color : 'black'; });
svg.selectAll("text")
.data(partition(hierarchy).descendants())
.enter().append("text")
.attr("transform", function(d){ return setLabelPosition(d); })
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("font-size", "18px")
.attr("fill", function(d){ return d.data.textcolor; })
.text(function(d){ if(parseInt(d.data.level) > 0 && parseInt(d.data.level) < 4){ return (d.data.name).toUpperCase(); }});
d3.select(self.frameElement)
.style("height", height + "px");
function setRadius(side, level){
var result = 0;
var innerValues = [0, 120, 180, 240, 365];
var outerValues = [0, 180, 240, 365, 400];
if(!side){
throw error;
}
if(side === "inner"){
result = innerValues[level];
}
if(side === "outer"){
result = outerValues[level];
}
return result;
};
function setLabelPosition(d){
var result = '';
var angle = 0;
var centroid = arc.centroid(d);
if(parseInt(d.data.level) === 3){
angle = (180/Math.PI * (arc.startAngle()(d) + arc.endAngle()(d))/2 - 90);
if(angle > 90){
angle = angle - 180;
}
result = "translate(" + centroid + ")rotate(" + angle + ")";
} else {
angle = (180/Math.PI * (arc.startAngle()(d) + arc.endAngle()(d))/2);
result = "translate(" + centroid + ")rotate(" + angle + ")";
}
return result;
};
And the result :
My problem is, how to curve these level 1 & 2 labels (like the one which have a red border), but keep my lvl 3 labels as they currently are.
It's really a pain in the head, and I did many search (on Google and SO) but I didn't find any satisfying answer.
A solution without using a textPath will be awesome if possible, but any advice is welcome.
Many thanks guys and sorry for my English (as you can probably see it's not my birth language).
PS : This is D3.js v4.
I have a d3 globe, and I have it scaling up (zooming in) when I doubleclick it. However, the zoom only works the first time I doubleclick. After that, I see that the program is entering the dblclick function, but no zooming is taking place. This is probably a stupid question, but I would be grateful if anyone were able to tell me how to make the zoom happen each time the globe is doubleclicked.
var width = 800,
height = 800,
centered;
var feature;
var projection = d3.geo.azimuthal()
.scale(380)
.origin([-71.03,42.37])
.mode("orthographic")
.translate([380, 400]);
var circle = d3.geo.greatCircle()
.origin(projection.origin());
// TODO fix d3.geo.azimuthal to be consistent with scale
var scale = {
orthographic: 380,
stereographic: 380,
gnomonic: 380,
equidistant: 380 / Math.PI * 2,
equalarea: 380 / Math.SQRT2
};
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#globe").append("svg:svg")
.attr("width", 800)
.attr("height", 800)
.on("dblclick", dblclick)
.on("mousedown", mousedown);
var g = svg.append("g");
d3.json("simplified.geojson", function(collection) {
g.append("g")
.attr("id", "countries")
.selectAll("path")
.data(collection.features)
.enter().append("svg:path")
.attr("d", clip)
.attr("id", function(d) { return d.properties.ISO3; })
.on("mouseover", pathOver)
.on("mouseout", pathOut)
.on( "dblclick", dblclick)
.on("click", click);
feature = svg.selectAll("path");
feature.append("svg:title")
.text(function(d) { return d.properties.NAME; });
});
...
function dblclick(d) {
var x, y, k;
/*if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });*/
g.transition()
.duration(750)
//.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.attr("transform", "scale(1.5)");
//.style("stroke-width", 1.5 / k + "px");
}
I agree with Erik E. Lorenz (no way to link to Erik's answer, it appears). Right now you're setting the zoomscale in the line
.attr("transform", "scale(1.5)");
The problem is that each time you call dblclick(), you're "resetting" it to 1.5. It's not multiplying by 1.5 it's just getting set. D3 doesn't remember what it used to be. That's why the first time you call dblclick() it works (because you're transforming the scale to 1.5 from 1). But from then on, the scale is already transformed to 1.5 and you just keep setting the scale transform to 1.5.
You need to keep track of "how far you've zoomed". And to do that you need a variable that keeps it's value between calls to dblclick(). I'd do something like this:
/* given the structure of your code, you can probably just declare the
variable before the function declaration. the function `dblclick` will
have access to the variable via closure */
var zoomScale = 1;
/* then you can just do this */
function dblclick(d) {
// you'll probably want to play with the math here
// that is, "1.5" might not be best
zoomScale = zoomScale * 1.5; // or some shorthand
g.transition()
.duration(750)
.attr("transform", "scale(" + zoomScale + ")");
}
I think that that scale(1.5) might be the problem. Have you tried dynamically increasing that factor every time dblclick() is called?
I am using the javascript library d3.js (http://d3js.org/) to create canvas data visualizations. I'm trying to make an arc, but it's not accepting the data parameters from my array. Does anyone know what I'm doing wrong? This is my code:
var chartConfig = { "canvasSize" : 800 }
var radius = chartConfig.canvasSize / 2;
var pi = Math.PI;
var vis = d3.select("#chart").append("svg")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var arcData = [
{aS: 0, aE: 45,rI:radius/2,rO:radius}
];
var arc = vis.selectAll("arc").data(arcData).enter().append("arc");
arc.attr("innerRadius", function(d){d.rI}).attr("outerRadius",function(d){d.rO}).attr("class","arc");
function degToRad(degrees){
return degrees * (pi/180);
}
There is no arc element in SVG, you need to define the appropriate path element. Luckily there is a d3 helper function to do this.
var arc = d3.svg.arc()
.innerRadius(50)
.outerRadius(70)
.startAngle(45 * (Math.PI/180)) //converting from degs to radians
.endAngle(3) //just radians
vis.append("path")
.attr("d", arc)
.attr("transform", "translate(200,200)")
Working example at http://jsfiddle.net/g0r9n090/;