d3.js - 将森伯斯特显示为半圆

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

其余的代码保持不变。