Javascript 带标签的d3径向条形图中的渲染问题

我定制的d3径向图没有渲染最小值的圆弧。

var width = 360,
height = 300,
barHeight = height / 2 - 40;

var formatNumber = d3.format("s");

var color = d3.scale.ordinal()
    .range(["#F15D5D","#FAD64B"]);

var svg = d3.select('#chart').append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('class','radial')
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

var data = [{
        "name": "ABC",
        "value":4
    },
    {
        "name": "XYZ",
        "value":5
    },{
        "name": "DEF",
        "value":2
    },
    {
        "name": "GHI",
        "value":3
    },{
        "name": "JKL",
        "value":1
    }];

data.sort(function(a,b) { return b.value - a.value; });

var extent = d3.extent(data, function(d) { return d.value; });
var barScale = d3.scale.linear()
    .domain(extent)
    .range([0, barHeight]);

var keys = data.map(function(d,i) { return d.name; });
var numBars = keys.length;


// X scale
var x = d3.scale.linear()
    .domain(extent)
    .range([0, -barHeight]);

// X axis
var xAxis = d3.svg.axis()
    .scale(x).orient("left")
    .ticks(3)
    .tickFormat(formatNumber);

// Inner circles
var circles = svg.selectAll("circle")
    .data(x.ticks(5))
    .enter().append("circle")
    .attr("r", function(d) {return barScale(d);})
    .style("fill", "none")
    //.style("stroke", "black")
    //.style("stroke-dasharray", "2,2")
    .style("stroke-width",".5px");

// Create arcs
var arc = d3.svg.arc()
    .startAngle(function(d,i) { 
    var a = (i * 2 * Math.PI) / numBars;
    var b = ((i + 1) * 2 * Math.PI) / numBars;
    var d = (b-a) / 4;
    var x = a+d;
    var y = b-d;

    return x;//(i * 2 * Math.PI) / numBars; 
})
.endAngle(function(d,i) { 
    var a = (i * 2 * Math.PI) / numBars;
    var b = ((i + 1) * 2 * Math.PI) / numBars;
    var d = (b-a) / 4;
    var x = a+d;
    var y = b-d;
    return y;//((i + 1) * 2 * Math.PI) / numBars; 
})
.innerRadius(0);

// Render colored arcs
var segments = svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .each(function(d) { d.outerRadius = 0; })
    .style("fill", function (d) { return color(d.name); })
    .attr("d", arc);


   segments.transition().ease("elastic").duration(1000).delay(function(d,i) {return (25-i)*50;})
    .attrTween("d", function(d,index) {
        var i = d3.interpolate(d.outerRadius, barScale(+d.value));
        return function(t) { d.outerRadius = i(t); return arc(d,index); };
    });

 // Outer circle
    svg.append("circle")
    .attr("r", barHeight)
    .classed("outer", true)
    .style("fill", "none")
    //.style("stroke", "black")
    .style("stroke-width",".5px");

// Apply x axis
    svg.append("g")
    .attr("class", "x axis")
    .call(xAxis);

// Labels
var labelRadius = barHeight * 1.025;

var labels = svg.append("g")
    .classed("labels", true);

labels.append("def")
    .append("path")
    .attr("id", "label-path")
    .attr("d", "m0 " + -labelRadius + " a" + labelRadius + " " + labelRadius + " 0 1,1 -0.01 0");

labels.selectAll("text")
    .data(keys)
    .enter().append("text")
    .style("text-anchor", "middle")
    .style("font-weight","bold")
    .style("fill", function(d, i) {return "#555";})
    .append("textPath")
    .attr("xlink:href", "#label-path")
    .attr("startOffset", function(d, i) {return i * 100 / numBars + 50 / numBars + '%';})
    .text(function(d) {return d.toUpperCase(); });

此处不呈现值为

1

的项目

JKL

，并将外层面积计算为

0

问题在于：

var extent = d3.extent(data, function(d) { return d.value; });

此行设置

barScale

和

x

的域。但是，如果您使用

d3.extent

执行此操作，您实际上是在说域从最小值变为最大值

[1, 5];

。。。这意味着值

1

将映射到范围的最小值

相反，请将域中的最小值设置为零：

var extent = [0, d3.max(data, d=>d.value)];

这将产生以下结果：

[0, 5];

---

这是你最新的提琴：

PS：关于你的第二个问题（“我怎样才能将标签移到每个部分的顶部，而不是与外圈保持一致？”），请发布另一个问题。在s.O.这一直是一个很好的做法。每个问题只保留一个问题。当然，我会发布另一个问题。谢谢@devo！很抱歉，这在D3标签问题中很常见，人们会在图表中询问一些不同的问题。我总是告诉他们在不同的，个别的帖子中分开问题。。。毕竟，在S.O.这里询问是免费的！没问题，这是我的第二个问题不，我不。。。事实上，这是dataviz中一个众所周知的问题，特别是在饼图/甜甜圈图中：如何表示小值？或者，更好地解释一下，如何表示在几个数量级上不同的值？在极端情况下，您必须完全放弃饼图/油炸圈饼图，并为图表选择另一种视觉表示。