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

Question

我的自定义 d3 径向图未呈现最小值的弧形。 <强> Fiddle

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 项，outerRadius 计算为 0。

Answer 1

问题出在这里:

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];

这是您更新的 fiddle :https://jsfiddle.net/a9w7c2dw/