在D3内的雷达图中创建4个象限

时间:2015-08-03 09:08:17

标签: d3.js radar-chart

我正在尝试在雷达图中实现4个象限,但似乎无法显示4个方框。

function buildLevelsBoxes() {
      var boxes = 0;
      while (boxes < 4) {
          var colors = [
              '#e5e5e5',
              '#444444',
              '#e5e5e5',
              '#444444'
          ];

          if (boxes > 2) {
              vis.boxes
                  .append("svg:rect").classed("level-boxes", true)
                  .attr("x", function () {
                      return (boxes / 2) * config.w;
                  })
                  .attr("y", function () {
                      return config.h / 2;
                  })
                  .attr("width", function () {
                      return config.w / 2;
                  })
                  .attr("height", function () {
                      return config.h / 2;
                  })
                  .attr("transform", "translate(" + (config.w / 2 - levelFactor) + ", " + (config.h / 2 - levelFactor) + ")")
                  .attr("stroke", colors[boxes])
                  .attr("fill", colors[boxes])
                  .attr("stroke-width", "0.5px");
          } else {
              vis.boxes
                  .append("svg:rect").classed("level-boxes", true)
                  .attr("x", function (d, i) {
                      return boxes * config.w;
                  })
                  .attr("y", function (d, i) {
                      return 0;
                  })
                  .attr("width", function () {
                      return config.w / 2;
                  })
                  .attr("height", function () {
                      return config.h / 2;
                  })
                  .attr("transform", "translate(" + (config.w / 2 - levelFactor) + ", " + (config.h / 2 - levelFactor) + ")")
                  .attr("stroke", colors[boxes])
                  .attr("fill", colors[boxes])
                  .attr("stroke-width", "0.5px");
          }
      }
      boxes++;
  }

这是我迄今为止从http://bl.ocks.org/nbremer/6506614

获取的内容

任何提示将不胜感激。

0 个答案:

没有答案