Javascript D3.JS SVG圆圈中的数据驱动颜色_Javascript_D3.js_Svg

Javascript D3.JS SVG圆圈中的数据驱动颜色

javascript d3.js svg

Javascript D3.JS SVG圆圈中的数据驱动颜色,javascript,d3.js,svg,Javascript,D3.js,Svg,!！简化了问题所附的代码生成一个由64个小圆组成的模式，从而生成更大的圆问题是关于基于数据集驱动每个圆的颜色，如以下，其中每个圆可以基于1-6的数据值分配颜色：一个部分的示例数据集： [1,3,5,2，3…]在这里，前4个数字表示第一组4个小圆的值，这些小圆通向其中一个大圆，最后一个数字表示该大圆的值如果有人可以根据上面的示例，根据“硬编码”数据集帮助驱动每个圆圈的颜色，我将作为下一步将数据集附加到我的数据库。（最终结果将基于驱动颜色的数据库字符串加载此图像）注意：理想情况下，代码中的

!！简化了问题

所附的代码生成一个由64个小圆组成的模式，从而生成更大的圆

问题是关于基于数据集驱动每个圆的颜色，如以下，其中每个圆可以基于1-6的数据值分配颜色：一个部分的示例数据集： [1,3,5,2，3…]在这里，前4个数字表示第一组4个小圆的值，这些小圆通向其中一个大圆，最后一个数字表示该大圆的值

如果有人可以根据上面的示例，根据“硬编码”数据集帮助驱动每个圆圈的颜色，我将作为下一步将数据集附加到我的数据库。（最终结果将基于驱动颜色的数据库字符串加载此图像）

注意：理想情况下，代码中的圆圈都需要稍微移动，以便它们也适合4个象限，但这里的关键挑战是基于数据集进行分配

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">

</style>

</head> 
<body>
<script type="text/javascript">


    var width = height = 500;
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    var color = d3.scaleOrdinal(d3.schemeCategory10)
      .domain(d3.range(16));

    var data1 = d3.range(16);
    var dataRadius = [70, 110, 150, 190, 230];

    svg.append("circle").attr("cx", width / 2)
        .attr("cy", height / 2)
        .attr("r", 30)
        .attr("fill", "yellow");

    //my additions

    svg.append("circle").attr("cx", 40)
        .attr("cy", 40)
        .attr("r", 30)
        .attr("fill", "lightgrey")
        .attr("stroke-width", "1")
        .attr("stroke", "grey");

    svg.append("circle").attr("cx", width - 40)
        .attr("cy", height - 40)
        .attr("r", 30)
        .attr("fill", "lightgrey")
        .attr("stroke-width", "1")
        .attr("stroke", "grey");

    svg.append("circle").attr("cx", width - 40)
        .attr("cy", 40)
         .attr("r", 30)
        .attr("fill", "lightgrey")
        .attr("stroke-width", "1")
        .attr("stroke", "grey");

    svg.append("circle").attr("cx", 40)
        .attr("cy", height - 40)
        .attr("r", 30)
        .attr("fill", "lightgrey")
        .attr("stroke-width", "1")
        .attr("stroke", "grey");

    svg.append("line") 
        .attr("y1", height /2) 
        .attr("y2" , height /2) 
        .attr("x1" , 0) 
        .attr("x2" , width)
        .attr("stroke-width","2") 
        .attr("stroke", "black");

    svg.append("line")
     .attr("x1", height / 2)
     .attr("x2", height / 2)
     .attr("y1", 0)
     .attr("y2", width)
     .attr("stroke-width", "2")
     .attr("stroke", "black");

    //end of my additions
    var groups = svg.selectAll(".groups")
        .data(dataRadius)
        .enter()
        .append("g");

    var circles = groups.selectAll(".circles")
        .data(data1)
        .enter()
        .append("circle");

    circles.attr("cx", function (d, i) { var radius = this.parentNode.__data__; return width / 2 + (radius * Math.sin(i * (360 / (data1.length) * Math.PI / 180))) })
        .attr("cy", function (d, i) { var radius = this.parentNode.__data__; return height / 2 + (radius * Math.cos(i * (360 / (data1.length) * Math.PI / 180))) })
        .attr("r", function () { return this.parentNode.__data__ == 230 ? 24 : 14 })
        .attr("fill", function (d, i) { return i == 13 || i == 14 ? color(i - 2) : "#ccc" });
</script>   

</body>

</html>


D3试验
可变宽度=高度=500；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
.域（d3.范围（16））；
var data1=d3.范围（16）；
VarDataRadius=[70110150190230]；
svg.append（“圆圈”）.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“r”，30）
.attr（“填充”、“黄色”）；
//我的补充
svg.append（“圆圈”）.attr（“cx”，40）
.attr（“cy”，40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，宽度-40）
.attr（“cy”，高度-40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，宽度-40）
.attr（“cy”，40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，40）
.attr（“cy”，高度-40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“行”）
.attr（“y1”，高度/2）
.attr（“y2”，高度/2）
.attr（“x1”，0）
.attr（“x2”，宽度）
.attr（“笔划宽度”、“2”）
.attr（“笔划”、“黑色”）；
svg.append（“行”）
.attr（“x1”，高度/2）
.attr（“x2”，高度/2）
.attr（“y1”，0）
.attr（“y2”，宽度）
.attr（“笔划宽度”、“2”）
.attr（“笔划”、“黑色”）；
//我的补充结束了
var groups=svg.selectAll（“.groups”）
.数据（数据半径）
.输入（）
.附加（“g”）；
变量圆=组。选择全部（“.circles”）
.数据（数据1）
.输入（）
.附加（“圆圈”）；
circles.attr（“cx”，函数（d，i）{var radius=this.parentNode.\uuuu数据\uuuuuu；返回宽度/2+（半径*Math.sin（i*（360/（data1.length）*Math.PI/180）））
.attr（“cy”，函数（d，i）{var radius=this.parentNode.\uuuuu数据\uuuuuuu；返回高度/2+（半径*Math.cos（i*（360/（data1.length）*Math.PI/180）））
.attr（“r”，函数（）{返回这个.parentNode.\uuuuu数据\uuuuuu==230？24:14}）
.attr（“fill”，函数（d，i）{returni==13 | | i==14？color（i-2）：“#ccc”}）；

我将提供一个特别的解决方案：因为我是您在问题中发布的代码的编写者，所以我知道圆圈是如何绘制的：从中心到外部逆时针绘制。也就是说，我的解决方案涉及到类

如果我们在

圆圈

变量的末尾添加此简单行：

.attr("class", function(d){ return "circle" + d});

我们将为圆圈设置一个类。但有趣的是，我们每圈有16个圆，因此，下一个（外部）环中的所有圆都将具有相同的类！当它们从内到外绘制时，一个简单的：

d3.selectAll(".circle8")

将按您想要的顺序选择属于该类的所有5个圆

因此，如果设置如下数组：

var colour8 = ["yellow", "yellow", "tan", "red", "purple"];

它们将按照从内到外的顺序进行喷漆

这是一个演示。课程从6点钟的0开始，逆时针开始，7点钟左右以15结束。这些是颜色：

var color0 = ["teal", "blue", "red", "red", "cyan"];//6 o'clock
var color8 = ["red", "red", "red", "red", "pink"];//12 o'clock
var color9 = ["tan", "tan", "green", "cyan", "lime"];//just next to it

查看演示：

var宽度=高度=500；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
.域（d3.范围（16））；
var data1=d3.范围（16）；
VarDataRadius=[70110150190230]；
svg.append（“圆圈”）.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“r”，30）
.attr（“填充”、“黄色”）；
//我的补充
svg.append（“圆圈”）.attr（“cx”，40）
.attr（“cy”，40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，宽度-40）
.attr（“cy”，高度-40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，宽度-40）
.attr（“cy”，40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“圆圈”）.attr（“cx”，40）
.attr（“cy”，高度-40）
.attr（“r”，30）
.attr（“填充”、“浅灰色”）
.attr（“笔划宽度”、“1”）
.attr（“笔划”、“灰色”）；
svg.append（“行”）
.attr（“y1”，高度/2）
.attr（“y2”，高度/2）
.attr（“x1”，0）
.attr（“x2”，宽度）
.attr（“笔划宽度”、“2”）
.attr（“笔划”、“黑色”）；
svg.append（“行”）
.attr（“x1”，高度/2）
.attr（“x2”，h