將陽光顯示爲半圓

Question

是否可以創建形狀爲半圓形的陽光照射？我能夠賦予它我想要的形狀，但是我遇到了節點問題。並非所有顏色都顯示在新形狀上，並且文字顯示錯誤。

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

我已經解決了這個問題。這是我使用的代碼：

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)); }); 

而其餘代碼保持不變。