Display sunburst as a semicircle - d3.js

Question

Is it possible to create a sunburst that is shaped as a semicircle? I was able to give it the shape that I want, but I have problems with the nodes. Not all the colors appear on the new shape and the text is displayed wrong.
var partition = d3.layout.partition()
.sort(null)
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(Math.PI/360, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
var nodes = partition.nodes(json);
var path = vis.selectAll("path").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", function(d,i) {
//This is a mimic of the selection in the Tree List Box - picking all the parents of the selected cell
_this.Data.SearchColumn(0, "*" + d.name + "*",false);
});
var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
.style("opacity", 1)
.style("fill","#333")
.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) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", function(d,i) {
_this.Data.SearchColumn(0, "*" + d.name + "*",false);
});
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
textEnter.append("tspan")
.text(" ");
textEnter.append("tspan")
.text(function(d) { return d.depth ? d.name.split(" ")[2] || "" : ""; } );
textEnter.append("tspan")
.text(" ");
textEnter.append("tspan")
.text(function(d) { return d.depth ? d.name.split(" ")[3] || "" : ""; } );

Answer 1

I've solved the problem. This is the code I used:
var w = Math.min(heightc,widthc),
h = w/2,
r = w / 2-20,
x = d3.scale.linear().range([0, 1* Math.PI]),
y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, r]),
p = 4,
color = d3.scale.category20c(),
duration = 1000;
var div = d3.select("#"+myDivId);
div.select("img").remove();
var vis = div.append("svg")
.attr("width", w + p * 2)
.attr("height", h + p * 2)
.append("g")
.attr("transform", "translate(" + (p) + "," + (r + p) + ")");
var partition = d3.layout.partition()
.sort(null)
.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, d.y ? y(d.y) : d.y); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
And the rest of the code remained the same.