Javascript d3.js图表-QQ绘图-图表每个部分的不同颜色

需要帮助生成图表中的颜色吗

问题： 我正在创建d3图表-QQ绘图，我想为图表的每个部分添加颜色。 但我不能这样做，所以需要帮助

谢谢你宝贵的时间

谢谢你的帮助

引用。 由于易于定制，我正在考虑D3QQ图而不是ProtovisQQ图

数据将绑定在以下代码中

  var g = vis.selectAll("g") 
.data([{
  x: d3.range(n).map(Math.random),
  y: turkers[0].percent.values,
  label: "Uniform Distribution"
}, {
  x: d3.range(n).map(normal1(tm, td)),
  y: turkers[0].percent.values,
  label: "Gaussian (Normal) Distribution"
}, {
  x: d3.range(n).map(normal3(dd)),
  y: turkers[0].percent.values,
  label: "Mixture of 3 Gaussians"
}])
.enter().append("g")
.attr("class", "qq")
.attr("r", 5)
.attr("transform", function(d, i) {
  return "translate(" + (width + margin.right + margin.left) * i + ")";
})

一种可能的解决方案（从众多解决方案中选择）是选择每组中的圆圈：

g.each(function(_, i) {
    d3.select(this).selectAll("circle").style("stroke", colors(i))
});

在本例中，第二个参数（

i

）是每个组的索引，我使用它传递到色阶

以下是更新的JSFIDLE：

这里是S.O.代码片段：

var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
var color=d3.scale.ordinal（）范围（[“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var colors=d3.scale.ordinal（）范围（[“蓝色”、“橙色”、“绿色”）；
可变宽度=270，
高度=270，
保证金={
前20名，
右:10,，
底数：20，
左：35
},
n=10000；//要生成的样本数
var chart=d3.qq（）
.宽度（宽度）
.高度（高度）
.domain（[-.1,1.1]）
.d格式（函数（d）{
返回~~（d*100）；
});
var vis=d3.选择（“主体”）.追加（“svg”）
.attr（“宽度”，（宽度+边距.右+边距.左）*3）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
d3.json（“https://api.myjson.com/bins/uti7i，函数（错误，turkers）{
如果（错误）抛出错误；
var tm=平均值（turkers[0].百分比值），
td=Math.sqrt（方差（turkers[0].percent.values）），
dd=[
[0.10306430789206111, 0.0036139086950272735, 0.30498647327844536],
[0.5924252668569606, 0.0462763685758622, 0.4340870312025223],
[0.9847627827855167，2.352350767874714e-4，0.2609264955190324]
];
var Mean=turkers[0]。平均值；
var STDDeviation=turkers[0][“标准偏差”]；
var NormalTestPValue=turkers[0][“正常测试p值”]；
var minValue=turkers[0].percent.minValue；
var maxValue=turkers[0].percent.maxValue；
var g=相对于selectAll（“g”）
.数据([{
x:d3.范围（n）.映射（数学随机），
y:turkers[0].percent.values，
标签：“均匀分布”
}, {
x:d3.范围（n）.贴图（法线1（tm，td）），
y:turkers[0].percent.values，
标签：“高斯（正态）分布”
}, {
x:d3.范围（n）.映射（法线3（dd）），
y:turkers[0].percent.values，
标签：“3高斯混合”
}])
.enter（）.append（“g”）
.attr（“类”、“qq”）
.attr（“r”，5）
.attr（“转换”，函数（d，i）{
返回“translate（“+（宽度+边距.右侧+边距.左侧）*i+”）；
})
.on（“mousemove”，函数（d，turkers）{
工具提示
.style（“左”，d3.event.pageX-（-40）+“px”）
.样式（“顶部”，d3.event.pageY-70+“px”）
.style（“显示”、“内联块”）
.html（“”+
d3.event.clientX+“第百分位：”+d.x[d3.event.clientX].toFixed（2）+“，“+d.y[d3.event.clientY].toFixed（2）+“平均值：”+Mean+
“标准偏差：”+STD偏差+
“正常测试P值：”+NormalTestPValue+
“最小值：”+minValue.toFixed（2）+
“最大值：”+maxValue+“”
));
})
.开启（“鼠标出”，功能（d）{
样式（“显示”、“无”）；
});
g、 附加（“rect”）
.attr（“类”、“框”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
g、 电话（图表）；
g、 附加（“文本”）
.attr（“dy”、“1.3em”）
.attr（“dx”，“.6em”）
.文本（功能（d）{
返回d.标签；
});
图.持续时间（1000）；
window.transition=函数（）{
g、 数据（随机）。调用（图表）；
};
g、 每个（函数）{
d3.选择（此）。选择全部（“圆”）。样式（“笔划”，颜色（i））
});
});
函数随机化（d）{
d、 y=d3.范围（n）.映射（数学随机）；
返回d；
}
//平均值为0的正态分布样本，标准差为1。
函数正规（）{
var x=0，
y=0，
rds，c；
做{
x=数学随机（）*2-1；
y=数学随机（）*2-1；
rds=x*x+y*y；
}而（rds==0 | | rds>1）；
c=Math.sqrt（-2*Math.log（rds）/rds）；//Box-Muller变换
返回x*c；//扔掉额外的样本y*c
}
//简单一维高斯（正态）分布
函数normal1（平均值、偏差）{
返回函数（）{
返回平均值+偏差*正常值（）；
};
}
//用E-M算法拟合高斯混合模型（k=3）
函数3（dd）{
返回函数（）{
var r=Math.random（），
i=r

正文{
字体：12px无衬线；
宽度：960px；
高度：310px；
}
.qq.box，
.qq.勾选行，
.qq.分位数，
.qq.对角线{
冲程：#aaa；
填充：无；
}
.qq.分位数{
行程：#000；
}
.qq.对角线{
笔画：红色；
}
.qq g+g.y.tick{
显示：无；
}
.轴线路径，
.轴线{
填充：无；
冲程：#D4D8DA；
笔画宽度：1px；
形状渲染：边缘清晰；
}
.工具提示{
字体：12px无衬线；
位置：绝对位置；
显示：无；
最小宽度：80px；
高度：自动；
背景：#fff；
颜色：#000；
边框：1px纯红；
填充：14px；
文本对齐：左对齐；
}

你的“我现在所拥有的”实际上是“迈克·博斯特所拥有的”