I am developing a d3 sunburst type.
Everything is ok, It is taking the flare JSON correctly but, when I go to label the path look what is happening:
The code is the following:
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.linear()
.range([0, radius]);
var hue = d3.scale.ordinal().range(["#feec76","#aec7e8","#ff00bf","#7f7f7f"]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("http://api.printoriente.com/treemap.php", function(error, root) {
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) { return hue((d.children ? d : d.parent).name); })
.on("click", click);
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
And the rotation code is:
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
This script works for all others d3 but I have to put those colors for each path.
Where is the problem?
Regards.
UPDATED: d3 sunburst with small font-size:
UPDATED: I want something like this:
UPDATED: Take a look of internal labels:
I'm not sure where you got the code to calculate the angle from, but it seems to be completely off. If you look at this example, the code to compute the angle is (with everything else being equal)
var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;
Replacing the code in your example with that fixes the angles. To fix the positions, you can adjust the dx offset of the labels, e.g.
.attr("dx", 50")
Complete example here.
Related
I am creating donut using d3.js with AngularJS. Here is my Donut, by default I need to have same color for all the arcs of Donut chart, which is working fine. Now on hover of the particular arc I need to change the color of that particular arc to blue, which is not working. Can any one help me in this?
Below is the answer from the refernce plunker provided. :
scope.mouseOverPath = function(d) {
d3.select(this)
.transition()
.duration(duration)
.style("fill", "blue")
.each("start", function(d) {
labelRadius = radius + chartConfig.labelPaddingOver;
d3.select(this.parentNode).select('.legend')
.transition()
.attr("transform", function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
height = Math.sqrt(x * x + y * y);
return "translate(" + (x / height * labelRadius) + ',' +
(y / height * labelRadius) + ")";
});
})
...
}
scope.mouseOutPath = function(d) {
d3.select(this)
.transition()
.style('fill', function(d) {
return color(d.data.label);
})
.each("start", function(d) {
labelRadius = radius + chartConfig.labelPadding;
d3.select(this.parentNode).select('.legend')
.transition()
.attr("transform", function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
height = Math.sqrt(x * x + y * y);
return "translate(" + (x / height * labelRadius) + ',' +
(y / height * labelRadius) + ")";
});
})
...
}
Using d3's style method inside your directive's scope.mouseOverPath and scope.mouseOutPath methods did the trick.
https://plnkr.co/edit/P98rPVKOHOgN5fKB
I'm trying to display a sunburst with text. I used the code from a sunburst example and tried to add text to it (worked), but when it updates, my text disappears. I can only get it to display all text or text when loaded then no text. So when it updates, the text is either gone or is not in sync with the data.
Can anybody tell me what is wrong because I don't know anymore.
Original code: http://bl.ocks.org/mbostock/4348373
My adaptions:
var width = 1060,
height = 900,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var color = d3.scale.category20c();
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("http://localhost:50043/data.json", function (error, root) {
if (error) throw error;
var data = partition.nodes(root);
var path = svg.selectAll("path")
.data(partition.nodes(root))
.enter()
//.append("g");
.append("path")
//.attr("display", function (d) { return d.depth ? null : "none"; })
.attr("d", arc)
.style("fill", function (d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
var text = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.classed("label", true)
.attr("x", function (d) { return d.x; })
.attr("text-anchor", "middle")
// translate to the desired point and set the rotation
.attr("transform", function (d) {
if (d.depth > 0) {
return "translate(" + arc.centroid(d) + ")" +
"rotate(" + getAngle(d) + ")";
} else {
return null;
}
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("pointer-events", "none")
.text(function (d) { return d.name; });
function click(data) {
text.remove();
text = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.classed("label", true)
.attr("x", function(d) { return d.x; })
.attr("text-anchor", "middle")
// translate to the desired point and set the rotation
.attr("transform", function(d) {
if (d.depth > 0) {
return "translate(" + arc.centroid(d) + ")" +
"rotate(" + getAngle(d) + ")";
} else {
return null;
}
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("pointer-events", "none")
.text(function (d) { return d.name; });
path.transition()
.duration(750)
.attrTween("d", arcTween(data));
}
function getAngle(d) {
// Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
// for text it is the X axis.
var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
// If we are rotating the text by more than 90 deg, then "flip" it.
// This is why "text-anchor", "middle" is important, otherwise, this "flip" would
// a little harder.
return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function (d, i) {
return i
? function (t) { return arc(d); }
: function (t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
});
d3.select(self.frameElement).style("height", height + "px");
Update: You can find my code on https://github.com/KenBonny/D3-Chart-Test
You can view the handywork on github page: https://kenbonny.github.io/D3-Chart-Test/
It's because you are not passing any data to click
wirte function click() { instead of function click(data) {
and I think it will work
I have a static 3 level Sunburst diagram -
http://colinwhite.net/Sunburst/
My data is being nested with this function
http://colinwhite.net/Sunburst/js/treeRemapper.js
My approach is based on this example -
http://bl.ocks.org/mbostock/4348373
For some reason my zoom and tweening is not working -
var width = 960, height = 700,
radius = Math.min(width, height) / 2,
color = d3.scale.category20c();
var x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.sqrt().range([0, radius]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.json("data/getJson.php", function(error, data) {
var treeData = genJSON(data, ['SourceID', 'ProviderID']);
var path = svg.selectAll("path")
.data(partition.nodes(treeData))
.enter().append("path")
.attr("d", arc)
.style("fill-rule", "evenodd")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
}
});
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
Can anyone tell me what I'm doing wrong?
The example you are quoting is based on the "rescaling"/"readjusting" x and y domain/ranges. In your example, you have defined an arc that does not depend on the x and y scales, thus if you change these, there's no effect.
So what can you do?
First you need to take out the size of the partition (as you will handle that with scales):
var partition = d3.layout.partition()
//.size([2 * Math.PI, radius * radius])
.value(function(d) {
return 1;
});
(remove it, not comment it :) )
Next, you have to use and arc that does depend on the scales, e.g. like in the example:
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
As you can see, the max and min are kind of squeezing the "hidden" segments...
Cross fingers, run it
(I tried it with flare.json, it did work here)
Note
If you plan to also add reweighting when zoomed in, have a look at this nice example: http://bl.ocks.org/kerryrodden/477c1bfb081b783f80adof
So I've got a pretty standard D3 "Sunburst" diagram. However, the center path (i.e. the root), is too big. It's taking up a large portion of my diagram that is being wasted as the more important arcs around it struggle for space.
I'm about to add labels to the outer rings but I need more space.
See below.
I want to make the center circle (the light grey bit) smaller and the outer rings thicker.
Can any one help me?
Here's my code:
var width = 850,
height = 700,
padding = 6,
duration = 750,
labelLimit = 120,
radius = Math.min(width, height) / 2 - 10;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var svg = d3.select("#wheel")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "scan")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
var path = svg.selectAll("path")
.data(partition.nodes(bp.data.preparedData))
.enter()
.append("path")
//.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; })
.attr("class", 'context')
.attr("data-toggle", 'context')
.attr("data-target", '#context-menu')
.attr("data-name", function(d) { return d.name; })
.attr("data-type", function(d) { return d.type; })
.attr("data-provider", function(d) { return d.provider; })
.attr("data-ci_type", function(d) { return d.ci_type; })
.style("fill", function(d) { return bp.draw.getColor(d); });
var text = svg.selectAll("text")
.data(partition.nodes(bp.data.preparedData));
var textEnter = text.enter()
.append("text")
.style("fill-opacity", 1)
.style("font-weight", 200)
//.style("letter-spacing",1)
.style("fill", function(d) { return bp.draw.getLabelColor(d); })
.attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.attr("class", 'cursor')
.attr("data-toggle", 'context')
.attr("data-target", '#context-menu')
.attr("data-name", function(d) { return d.name; })
.attr("data-type", function(d) { return d.type; })
.attr("data-provider", function(d) { return d.provider; })
.attr("data-ci_type", function(d) { return d.ci_type; })
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.depth ? d.name : ""; });
The non-linear response in ring width is due to the square root in the y scale, in this line:
var y = d3.scale.sqrt()
.range([0, radius]);
If you want a linear reponse just change the scale to linear as in:
var y = d3.scale.linear()
.range([0, radius]);
You should then see evenly spaced rings.
I am making an interactive tool for creating Sunburst diagrams like this one with d3.js, svg and JQuery. The code for drawing the diagram is from that page, with a few minor modifications. I'm trying to draw text labels on the sections of the diagram, but although the elements are showing up in the Web Inspector (Chrome), they aren't visible on screen. I have tried to adapt code from here, and to some extent this has worked (Web Inspector says the elements exist), but I am mystified as to why the elements themselves don't show up. This is my code - the section for drawing labels is near the bottom. I would just use the code from the example page with labels, but the layout is very different and I'd have to start from scratch again.
var width = 850,
height = 850,
radius = Math.min(width, height) / 2;
var svg = d3.select("#vis-wrap")
.insert("svg", "*")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * 0.52 + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
var path = svg.datum(data).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) {return d.color;} )
.style("fill-rule", "evenodd")
.each(stash);
// Problem here
path.insert("text", "*")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return Math.sqrt(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
d3.selectAll("input[name=mode]").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.size; };
path.data(partition.value(value).nodes)
.transition()
.duration(1500)
.attrTween("d", arcTween);
});
// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
}
d3.select(self.frameElement).style("height", height + "px");
You're making the text a child of the path i.e.
<path ...>
<text>something</text>
</path>
I'm afraid that's not valid. You need to make the text element a sibling.
Confusingly you've called the <g> element you've created svg but it want's to be a child of that i.e.
svg.insert("text")
rather than path.insert("text")