d3.js 3.5 版与 5.16 版梯度问题

Question

我在网上找到了这个关于我需要的图表的非常好的代码（径向条形图）。 但是，它适用于 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);
    });
  }

问题在于渐变的代码：在 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> 

非常感谢并保持安全。

Answer 1

寻找例子

你可能想看看 Observable，它有 D3 v5 中的现代示例，由 D3 的创建者为大量图表制作。 这是一个径向条形图。

加载数据中

在 D3 v5 中，所有 fetch 函数现在都使用 Promises，并且必须这样使用：

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

您可以将 function 作为第二个参数传递给代码中then()中的参数。

秤

D3 使用d3.scaleLinear()而不是d3.scale.linear() 。 请参阅d3-scale 模块。