Question

我再说一遍这个d3js馅饼。

我设法设置饼图，更改切片（弧线）和单选按钮检查百分比文本。您可以在以下链接中查看示例：http://jsfiddle.net/fBwEe/

所以在那之后我发现了一个较小弧线及其标签的问题。它们出现在弧形中间，因为它们的宽度比它们宽，所以它们看起来是切割出来的。

所以我试图过滤掉那些较小的弧线，并将它们的标签放在靠近圆心的地方，这样它们就在弧形外面，但在它下面。

我使用了d3js .filter()功能。我的问题出现了。它们在渲染过程中的某处混合，特别是在使用单选按钮更改显示数据时，甚至显示数据为空（如在MG数据集上）标签。我很困惑，因为我在控制台中没有任何错误，但显然有些错误。您可以在jsfiddle中测试一下，这里是代码：

var data_1 = [
              {"ASS": 50, "PR": 70, "BPR":3, "MA": 1, "MG": 30},
              {"ASS": 3, "PR": 2, "BPR":4, "MA": 40, "MG": 70 },
              {"ASS": 20, "PR": 5, "BPR":6, "MA": 2, "MG": ""},
              {"ASS": 25, "PR": 2, "BPR":2, "MA": 55, "MG": ""},
              {"ASS": 2, "PR": 2, "BPR":2, "MA": 3, "MG": ""},
             ]

var dataN_1 = [
                {"naslov":"Landkreis Starnberg", "total":"23.610", "id":"32829456"}

              ]

var width_1 = $(".pie_container_1").width();
    height_1 = $(".pie_container_1").height();


var svg_1 = d3.select(".pie_container_1").append("svg")
    .attr("width", width_1)
    .attr("height", height_1)
    .attr("id","canvasPie_1")
    .attr("preserveAspectRatio","xMinYMid")
  .append("g")
    .attr("transform", "translate(" + width_1 / 2 + "," + height_1 / 2 + ")");

var canvasPie_1 = $("#canvasPie_1"),
            aspect = canvasPie_1.width() / canvasPie_1.height(),
            containerd3_1 = canvasPie_1.parent();

var targetWidth_1 = containerd3_1.width();
var targetHeight_1 = containerd3_1.height();
    canvasPie_1.attr("width", targetWidth_1);
    canvasPie_1.attr("height", targetHeight_1);

var radius_1 = Math.min(targetWidth_1, targetHeight_1) / 2;

// var color_1 = d3.scale.category20c();

var color_1 = d3.scale.linear().domain([0,1,2,3,4,5]).range(['#c6dbef','#8cb2e0','#548cd3','#16355b','#0f233d']);

var pie_1 = d3.layout.pie()
    .value(function(d) { return d.ASS; })
    .sort(null);

var arc_1 = d3.svg.arc()
    .innerRadius(radius_1 - 40)
    .outerRadius(radius_1);

var path_1 = svg_1.datum(data_1).selectAll("path")
      .data(pie_1)
    .enter().append("g")
      .attr("class", "slice")
      .append("path")
      .attr("fill", function(d, i) { return color_1(i); })
      .attr("d", arc_1)
      .each(function(d) { this._current = d; }); // store the initial angles


svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle > .2; })
    .append("text")
    .attr("class","val")
    .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius_1;
                return "translate(" + arc_1.centroid(d) + ")";
            })
    .style("text-anchor", "middle")
    .attr("fill","#FFFFFF")
    .style("font-weight","600")
    .data(data_1)
    .text(function(d) { return d.ASS + "%"; });

svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle < .2; })
    .append("text")
    .attr("class","valS")
    .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius_1;
                return "translate(" + arc_1.centroid(d)[0] + "," +  (arc_1.centroid(d)[1]+7)*0.6  + ")";
            })
    .style("text-anchor", "middle")
    .attr("fill","#777")
    .style("font-weight","600")
    .data(data_1)
.text(function(d) { return d.ASS + "%"; });

d3.selectAll(".pie_change_1")
  .on("change", change_1);



function change_1() {
   var value_1 = this.value;

svg_1.selectAll(".val").remove();
svg_1.selectAll(".valS").remove();

// clearTimeout(timeout_1);   
pie_1.value(function(d) { return d[value_1]; }); // change the value function

path_1 = path_1.data(pie_1); // compute the new angles

path_1.transition().duration(750).attrTween("d", arcTween_1); // redraw the arcs

svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle > .2; })
.append("text")
.attr("class","val")
.attr("transform", function(d) {
            d.innerRadius = 0;
            d.outerRadius = radius_1;
            return "translate(" + arc_1.centroid(d) + ")";
        })
.style("text-anchor", "middle")
.attr("fill","#FFFFFF")
.style("font-weight","600")
.data(data_1)
.text(function(d) { 
                     if( value_1 == "MG" && d.MG != "" ){ return d.MG + "%"; }
                     if( value_1 == "MA" ){ return d.MA + "%"; }
                     if( value_1 == "BPR" ){ return d.BPR + "%"; }
                    if( value_1 == "PR" ){ return d.PR + "%"; }
                     if( value_1 == "ASS" ){ return d.ASS + "%"; }

                 });


svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle < .2; })
.append("text")
.attr("class","valS")
.attr("transform", function(d) {
            d.innerRadius = 0;
            d.outerRadius = radius_1;
            return "translate(" + arc_1.centroid(d)[0] + "," +  (arc_1.centroid(d)[1]+7)*0.6  + ")";
        })
.style("text-anchor", "middle")
.attr("fill","#777")
.style("font-weight","600").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle < .2; })
.data(data_1)
.text(function(d) { 
                     if( value_1 == "MG" && d.MG != "" ){ return d.MG + "%"; }
                     if( value_1 == "MA" ){ return d.MA + "%"; }
                     if( value_1 == "BPR" ){ return d.BPR + "%"; }
                    if( value_1 == "PR" ){ return d.PR + "%"; }
                     if( value_1 == "ASS" ){ return d.ASS + "%"; }

                 });


}


function arcTween_1(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc_1(i(t));
  };
}

function angle(d) {
    var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
    return a > 90 ? a - 180 : a;
  }

欢迎任何帮助或建议......

Answer 1

问题在于arc_1布局助手的定义。

如果您希望自己的方案有效，则必须使用accessors和innerRadius outerRadius获得更多创意：

var arc_1 = d3.svg.arc()
    .innerRadius(function (d) { 
         return isDef(d.innerRadius) ? d.innerRadius : radius_1 - 40; 
    })
    .outerRadius(function (d) { 
         return isDef(d.outerRadius) ? d.outerRadius : radius_1;
    });

然后，当您尝试放置标签时，要计算质心，请执行以下操作：

    .attr("transform", function(d) {
                // Use $.extend here, if you are using jQuery
                // This is poor man's way of cloning an object.
                var d2 = JSON.parse(JSON.stringify(d));
                d2.innerRadius = 0;
                d2.outerRadius = radius_1;
                return "translate(" + arc_1.centroid(d2) + ")";
            })

工作演示：Demo

然而，你会发现这不是一个非常令人满意的方案，因为标签仍然被遮挡。

此外，标签的遮挡是一个非常普遍的问题，我之前提出过至少两种其他解决方案：

d3js馅饼，过滤掉较小的弧线，标签混合

1 个答案: