Question

我正在使用以下代码创建蜘蛛图：http://bl.ocks.org/nbremer/6506614。在我需要创建的图表中，我需要反转数字的顺序，例如100％实际上是中间点，0％是外部点。请参阅此屏幕截图，以便更好地了解我要执行的操作：what I wish to achieve。最大数字（7）位于图形的中间，而较小的数字（1）位于图形的末尾。

我在网上看到我可以改变比例范围。我尝试了这个，但它没有用。我不知道从哪里开始。

我是D3新手，非常感谢任何帮助！谢谢！

Answer 1

我刚检查了你提到过的例子。我对它的代码进行了一些更改（Radarchart.js是您需要调整的文件）。但是，此更改只会反转%格式的文本值（就像您提出的那样）。让我警告你，更改默认显示顺序将导致错误的数据解释。所以请确保您也改变了受影响的区域。我为你创建了一支笔，这样你就可以调整一下，直到你得到想要的结果。以下是已更改的代码，以便您知道：）

Radarchart.js

//Text indicating at what % each level is
    var t = [];
    for (var j = (cfg.levels - 1);
      (j < cfg.levels && j >= 0); j--) {
      t.push(cfg.factor * radius * ((j + 1) / cfg.levels))
    }

    for (var j = (cfg.levels - 1);
      (j < cfg.levels && j >= 0); j--) {
      var levelFactor = t[j];

      g.selectAll(".levels")
        .data([1]) //dummy data
        .enter()
        .append("svg:text")
        .attr("x", function(d) {
          return levelFactor * (1 - cfg.factor * Math.sin(0));
        })
        .attr("y", function(d) {
          return levelFactor * (1 - cfg.factor * Math.cos(0));
        })
        .attr("class", "legend")
        .style("font-family", "sans-serif")
        .style("font-size", "10px")
        .attr("transform", "translate(" + (cfg.w / 2 - levelFactor + cfg.ToRight) + ", " + (cfg.h / 2 - levelFactor) + ")")
        .attr("fill", "#737373")
        .text(Format((j + 1) * cfg.maxValue / cfg.levels));
    }

指向笔的链接：Radar chart

D3js在蜘蛛/雷达图表上反转数字顺序，从大到小

1 个答案: