D3.js v5-从数组长度开始绕一个圆附加线

如何解决D3.js v5-从数组长度开始绕一个圆附加线

我想制作一个显示序数数据（等级）的图像。有12个等级维度，每个等级都有自己的专用线附加到圆圈上。线的极性方向指定类别（即，指向1点= 1类，2点= 2类，依此类推）。线的长度表示额定值（短=差，长=良好）。结果应该类似于雪花或太阳爆发。

名称存储在字符串中。每个公司的评级存储在一个数组中。这是我的opencv变量的两部分：

data

我有运作公司的网格系统位置，但是我对齐圆圈的线的方式似乎存在问题。相关代码：

  {'fmc':'fmc1','ratings':[10,10,10]},{'fmc':'fmc2','ratings':[8,5,7,5]},

看来我已经正确地设置了触发，但是在实现过程中我被证明是错误的：围绕雪花的线条没有像雪花/太阳爆发/时钟那样被附加在圆圈上。

摘要：

var rotationDegree = d3.scalePoint().domain([0,12]).range([0,2*Math.PI - Math.PI/6]);

fmcG.append('line')
    .data([10,10])
    .attr("x1",r)
    .attr("y1",r)
    .attr("x2",function(d,i) { return length(10) * Math.cos(rotationDegree(i) - Math.PI/2) + (width/2); })
    .attr("y2",i) { return length(10) * Math.sin(rotationDegree(i) - Math.PI/2) + (height/2); })
.style("stroke",function(d) { return "#003366" });

var margins = {top:20,bottom:300,left:30,right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width',totalWidth)
.attr('height',totalHeight);

var graphGroup = svg.append('g')
.attr('transform',"translate("+margins.left+","+margins.top+")");

var data = [
  //{'fmc':'fmc1','ratings':[{'r1':10,'r2':10,'r3':10,'r4':10,'r5':10}]}
  {'fmc':'fmc1',{'fmc':'fmc3',];

var r = 30;
var length = d3.scaleLinear().domain([0,10]).range([0,50]);
var rotationDegree = d3.scalePoint().domain([0,2*Math.PI - Math.PI/6]);

var columns = 5;
var spacing = 220;
var vSpacing = 250;

var fmcG = graphGroup.selectAll('.fmc')
  .data(data)
  .enter()
  .append('g')
  .attr('class','fmc')
  .attr('id',(d,i) => 'fmc' + i)
  .attr('transform',k) => {
var horSpace = (k % columns) * spacing;
var vertSpace = ~~((k / columns)) * vSpacing;
return "translate("+horSpace+","+vertSpace+")";
  });


fmcG.append('circle')
.attr('cx',100)
.attr('cy',100)
.attr('r',r)
.style('fill','none')
.style('stroke','#003366');

fmcG.append('text')
.attr('x',100)
.attr('y',105)
.style('text-anchor','middle')
.text(function(d) {return d.fmc});

fmcG.append('line')
  //.data(function(d) {return d.ratings}) why doesnt it workk??????
.data([10,10])
.attr("x1",r)
.attr("y1",r)
.attr("x2",i) { return length(10) * Math.cos(rotationDegree(i) - Math.PI/2) + (width/2); })
.attr("y2",function(d) { return "#003366" });

问题

当使用数组中每个项目的值确定线的长度时，如何获取12个项的数组并以30度为增量（360除以12）在圆上附加线？

解决方法

主要问题是，现在您要添加一行。要附加与数据点一样多的行，必须设置适当的回车选择：

fmcG.selectAll(null)
  .data(function(d) {
    return d.ratings
  })
  .enter()
  .append('line')
  //etc...

顺便说一句，这就是您的data无法正常工作的原因（正如您在评论中所问的那样“为什么它不起作用？？？？？” ）

其他问题：

1. 点标需要具有离散域，例如d3.range(12)
2. 无论出于何种原因，您都将圆圈向右下移100px。我将线移动相同的数量。

以下是这些更改的摘要：

var margins = {
  top: 20,bottom: 300,left: 30,right: 100
};

var height = 600;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width',totalWidth)
  .attr('height',totalHeight);

var graphGroup = svg.append('g')
  .attr('transform',"translate(" + margins.left + "," + margins.top + ")");

var data = [
  //{'fmc':'fmc1','ratings':[{'r1':10,'r2':10,'r3':10,'r4':10,'r5':10}]}
  {
    'fmc': 'fmc1','ratings': [10,10,10]
  },{
    'fmc': 'fmc2','ratings': [8,5,7,5]
  },{
    'fmc': 'fmc3',];

var r = 30;
var length = d3.scaleLinear().domain([0,10]).range([0,50]);
var rotationDegree = d3.scalePoint().domain(d3.range(12)).range([0,2 * Math.PI]);

var columns = 5;
var spacing = 220;
var vSpacing = 250;

var fmcG = graphGroup.selectAll('.fmc')
  .data(data)
  .enter()
  .append('g')
  .attr('class','fmc')
  .attr('id',(d,i) => 'fmc' + i)
  .attr('transform',k) => {
    var horSpace = (k % columns) * spacing;
    var vertSpace = ~~((k / columns)) * vSpacing;
    return "translate(" + horSpace + "," + vertSpace + ")";
  });


fmcG.append('circle')
  .attr('cx',100)
  .attr('cy',100)
  .attr('r',r)
  .style('fill','none')
  .style('stroke','#003366');

fmcG.append('text')
  .attr('x',100)
  .attr('y',105)
  .style('text-anchor','middle')
  .text(function(d) {
    return d.fmc
  });

fmcG.selectAll(null)
  .data(function(d) {
    return d.ratings
  })
  .enter()
  .append('line')
  .attr("x1",100)
  .attr("y1",100)
  .attr("x2",function(d,i) {
    return 100 + length(d) * Math.cos(rotationDegree(i));
  })
  .attr("y2",i) {
    return 100 + length(d) * Math.sin(rotationDegree(i));
  })
  .style("stroke",function(d) {
    return "#003366"
  });

<script src="https://d3js.org/d3.v5.min.js"></script>