Javascript d3.js版本3.5与版本5.16的渐变问题

我在网上找到了这个关于我需要的图表（径向条形图）的非常好的代码。但是，它适用于d3.js的3.5.3版，但不适用于5.16.0版。当我研究它时，我似乎无法找到某些代码不起作用的确切原因。以下是代码：

function draw(csv) {
    "use strict";
  
    var margin = 0,
      width = 600,
      height = 600,
      maxBarHeight = height / 2 - (margin + 70);
  
    var innerRadius = 0.1 * maxBarHeight; // innermost circle
  
    var svg = d3.select('#chartWrapper')
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("class", "chart")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
    var defs = svg.append("defs");
  
    var gradients = defs
      .append("linearGradient")
      .attr("id", "gradient-chart-area")
      .attr("x1", "50%")
      .attr("y1", "0%")
      .attr("x2", "50%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");
  
    gradients.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#EDF0F0")
      .attr("stop-opacity", 1);
  
    gradients.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#ACB7BE")
      .attr("stop-opacity", 1);
  
    gradients = defs
      .append("linearGradient")
      .attr("id", "gradient-questions")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", "50%")
      .attr("y1", "0%")
      .attr("x2", "50%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");
  
    gradients.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#F6F8F9")
      .attr("stop-opacity", 1);
  
    gradients.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#D4DAE0")
      .attr("stop-opacity", 1);
  
    svg.append("circle")
      .attr("r", maxBarHeight + 70)
      .classed("category-circle", true);
  
    svg.append("circle")
      .attr("r", maxBarHeight + 40)
      .classed("question-circle", true);
  
    svg.append("circle")
      .attr("r", maxBarHeight)
      .classed("chart-area-circle", true);
  
    svg.append("circle")
      .attr("r", innerRadius)
      .classed("center-circle", true);
  
    d3.csv(csv, function(error, data) {
  
      var cats = data.map(function(d, i) {
        return d.category_label;
      });
  
      var catCounts = {};
      for (var i = 0; i < cats.length; i++) {
        var num = cats[i];
        catCounts[num] = catCounts[num] ? catCounts[num] + 1 : 1;
      }
      // remove dupes (not exactly the fastest)
      cats = cats.filter(function(v, i) {
        return cats.indexOf(v) == i;
      });
      var numCatBars = cats.length;
  
      var x_scale = d3.scale.linear()
        .domain([0, 100])
        .range([innerRadius, maxBarHeight]);
  
      var y_scale = d3.scale.linear()
        .domain([0, 100])
        .range([-innerRadius, -maxBarHeight]);
  
      svg.selectAll("circle.x.minor")
        .data(y_scale.ticks(10))
        .enter().append("circle")
        .classed("gridlines minor", true)
        .attr("r", function(d) {
          return x_scale(d);
        });
  
      // category lines
      svg.selectAll("line.y.major")
        .data(cats)
        .enter().append("line")
        .classed("gridlines major", true)
        .attr("y1", -innerRadius)
        .attr("y2", -maxBarHeight - 70)
        .attr("transform", function(d, i) {
          return "rotate(" + (i * 360 / numCatBars) + ")";
        });
  
      svg.append("g")
        .attr("class", "y axis")
        .call(y_axis);
    });
  }

函数绘图（csv）{
“严格使用”；
var保证金=0，
宽度=600，
高度=600，
maxBarHeight=高度/2-（边距+70）；
var innerRadius=0.1*maxBarHeight；//最里面的圆
var svg=d3.select（“#chartWrapper”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“类别”、“图表”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var defs=svg.append（“defs”）；
var梯度=defs
.append（“linearGradient”）
.attr（“id”，“渐变图区域”）
.attr（“x1”，“50%”）
.attr（“y1”，“0%”）
.attr（“x2”，“50%”）
.attr（“y2”，“100%”）
.attr（“扩展方法”、“pad”）；
渐变。附加（“停止”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“EDF0”）
.attr（“停止不透明度”，1）；
渐变。附加（“停止”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“ACB7BE”）
.attr（“停止不透明度”，1）；
梯度=defs
.append（“linearGradient”）
.attr（“id”，“梯度问题”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，“50%”）
.attr（“y1”，“0%”）
.attr（“x2”，“50%”）
.attr（“y2”，“100%”）
.attr（“扩展方法”、“pad”）；
渐变。附加（“停止”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“F6F8F9”）
.attr（“停止不透明度”，1）；
渐变。附加（“停止”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“#D4DAE0”）
.attr（“停止不透明度”，1）；
svg.append（“圆”）
.attr（“r”，最大高度+70）
.分类（“分类圈”，正确）；
svg.append（“圆”）
.attr（“r”，最大高度+40）
.classed（“问题圈”，正确）；
svg.append（“圆”）
.attr（“r”，最大高度）
.classed（“图表区域圆”，真）；
svg.append（“圆”）
.attr（“r”，内半径）
.分类（“中心圆”，正确）；
d3.csv（csv，函数（错误，数据）{
var cats=data.map（函数（d，i）{
返回d.category_标签；
});
var catCounts={}；
对于（变量i=0；i

问题在于渐变的代码：在版本5.16中，从**var gradients=defs**开始的代码似乎不再有效。它根本没有出现

欢迎大家帮忙

出于测试目的：

<!-- <script data-require="d3@*" data-semver="3.5.3" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script> -->
<script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 

非常感谢，请注意安全。

查找示例 您可能想看看Observable，它在D3 v5中提供了现代示例，由D3的创建者为许多图表制作

加载数据 在D3 v5中，现在使用承诺，并且：

您可以将作为第二个参数传递的函数放入代码中

then（）

中的函数

规模 D3使用

D3.scaleLinear（）

而不是

D3.scale.linear（）

。看

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })