Javascript d3js-创建类似星图的图表（包括示例）

我不熟悉d3js，但熟悉javascript和数据可视化原理

我曾尝试使用aster绘图图实现2维数据的可视化效果，但无法真正实现预期效果

附件中是我试图重新创建的图表和示例代码。 如果你能告诉我如何让它工作，或者如何优化它，那将是一件大事

我认为数据和代码应该是这样的。。有点。。（伪代码传入..）

数据示例：

    var testData = {
      maxPoints: 10,
      color: '#bababa',
      border: {
        width: 1,
        color: '#ffffff'
      },
      items: [
        {
          name: 'Looks',
          color: '#2976dd',
          weight: 0.37,
          points: 8
        },{
          name: 'Charm',
          color: '#87bd24',
          weight: 0.03,
          points: 5
        },{
          name: 'Honesty',
          color: '#406900',
          weight: 0.16,
          points: 7
        },{
          name: 'Humour',
          color: '#ffb200',
          weight: 0.31,
          points: 9
        },{
          name: 'Intelligence',
          color: '#f78200',
          weight: 0.12,
          points: 0
        }
      ]
    };

代码示例：

  var archs = [];
  // Loop through each item
  var circleRadius = 400;
  var innerRadius = 100;

  var startAngle = 0;
  var endAngle = 0;
  for (var i = 0; i < testData.items.length; i++) {
    // Draw each arch
    var maxPoints = testData.maxPoints;
    var archHeight = (circleRadius - innerRadius) / maxPoints;
    var startRadius = innerRadius;

    endAngle += testData.items[i].weight;

    for (var j = 0; j < maxPoints; j++) {
      var color = testData.color;
      // draw arch - don't know how to colorize accordingly..
      if (testData.items[i].points < j) {
        // color this arc somehow..
        color = testData.items[i].color;
      }

        d3.svg.arc()
        .startAngle(startAngle)
        .endAngle(endAngle)
        .innerRadius(startRadius)
        .outerRadius(startRadius+archHeight);

      // Increase startRadius
      startRadius += archHeight;
    }

    // Increase startAngle
    startAngle = endAngle;
  }

var-archs=[]；
//循环浏览每个项目
循环变异系数=400；
var innerRadius=100；
var-startAngle=0；
var-endAngle=0；
对于（var i=0；i

不知怎的，我的代码看起来要复杂得多。。虽然它仍然是伪代码。。 我还在挣扎。。如果有人能给我一个提示或一些工作代码开始，我将非常感谢

提前谢谢

---

-Chris

这里有一个快速实现，它复制了您的图表。它基本上基于重量构建同心圆环图，然后基于点为切片着色：

.弧形路径{
冲程：#fff；
}
var testData={
最高分数：10，
颜色：“#巴巴巴”，
边界：{
宽度：1，
颜色：“#ffffff”
},
项目：[{
名字：'长相'，
颜色：“#2976dd”，
重量：0.37，
积分：8
}, {
名字：'魅力'，
颜色：“#87bd24”，
重量：0.03，
分数：5分
}, {
姓名：'诚实'，
颜色：'#406900'，
重量：0.16，
积分：7
}, {
名字：'幽默'，
颜色：“#ffb200”，
重量：0.31，
积分：9
}, {
名称:"情报",，
颜色：“#f78200”，
重量：0.12，
分数：0
}]
};
可变宽度=500，
高度=500；
颜色=d3.scale.category20（）；
//内半径
var iR=75，
//每个同心圆弧的半径
r=（（Math.min（宽度、高度）/2）-iR）/testData.maxPoints；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d.weight；
})
.焊盘角度（.01）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var g=svg.selectAll（“.arc”）
.data（pie（testData.items））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
//迭代我们的环数
d3.范围（testData.maxPoints）
.forEach（功能（i）{
//生成弧
var arc=d3.svg.arc（）
.外层（r*（i+1）+iR）
.内半径（r*i+iR）；
//如果合适，请填写
g、 附加（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d）{
如果（i

你看过这个吗：？如果是，什么会阻止你使用它作为基础？嘿-我看到了这段代码！我仍然缺少一些D3JS逻辑的原则。。另一种方法是创建同心饼图/Donu图，并缩小外层。。但我认为我的方式也是合法的。星号图的问题是：我需要像图像示例中那样绘制一个网格视图-这就是为什么我必须制作一些循环魔法：/OK，我会在找到时间后尝试一个答案哇！！非常感谢！我要查一下你的密码。。我也尝试过这样做。