javascript - 如何将颜色更改为红色和蓝色而不是随机的？-6ren

javascript - 如何将颜色更改为红色和蓝色而不是随机的？

转载作者：行者123 更新时间：2023-11-28 05:14:23

我可以看到我需要在这里更改它

color = d3.scale.category20();

但我不知道我应该做什么=。
因为我希望所有其他切片都是红色，另一个切片是蓝色。
我在行中添加了一条注释，如果有帮助的话，我会更改颜色，对于 html & css & js 来说是新手，所以我使用这个元素来让我的心态正确。

如何将其他所有切片更改为红色，其他切片更改为蓝色？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Spinning wheel</title>
    <style type="text/css">
    text{
        font-family:Helvetica, Arial, sans-serif;
        font-size:8px;
        pointer-events:none;
    }
    #chart{
        position:absolute;
        width:500px;
        height:500px;
        top:0;
        left:0;
    }
    #question{
        position: absolute;
        width:400px;
        height:500px;
        top:0;
        left:520px;
    }
    #question h1{
        font-size: 50px;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 0;
        margin: 0;
        top:50%;
        -webkit-transform:translate(0,-50%);
                transform:translate(0,-50%);
    }
    </style>

</head>
<body>
    <div id="chart"></div>
    <div id="question"><h1></h1></div>

    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var padding = {top:20, right:40, bottom:0, left:0},
            w = 500 - padding.left - padding.right,
            h = 500 - padding.top  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.category20();//category20c() HERE IS THE LINE WHERE I CHANGE THE COLORS
            //randomNumbers = getRandomNumbers();
        //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results
        var data = [
                    {"label":"Question 1",  "value":1,  "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
                    {"label":"Question 2",  "value":1,  "question":"What CSS property is used for changing the font?"}, //font-family
                    {"label":"Question 3",  "value":1,  "question":"What CSS property is used for changing the color of text?"}, //color
                    {"label":"Question 4",  "value":1,  "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
                    {"label":"Question 5",  "value":1,  "question":"What CSS property is used for changing the size of text?"}, //font-size
                    {"label":"Question 6",  "value":1,  "question":"What CSS property is used for changing the background color of a box?"}, //background-color
                    {"label":"Question 7",  "value":1,  "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
                    {"label":"Question 8",  "value":1,  "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
                    {"label":"Question 9",  "value":1,  "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
                    {"label":"Question 10", "value":1, "question":"With CSS selectors, what character prefix should one use to specify a class?"}, //period
                    {"label":"Question 11", "value":1, "question":"With CSS selectors, what character prefix should one use to specify an ID?"}, //pound sign
                    {"label":"Question 12", "value":1, "question":"In an HTML document, which tag holds all of the content people see?"}, //<body>
                    {"label":"Question 13", "value":1, "question":"In an HTML document, which tag indicates an unordered list?"}, //<ul>
                    {"label":"Question 14", "value":1, "question":"In an HTML document, which tag indicates the most important heading of your document?"}, //<h1>
                    {"label":"Question 15", "value":1, "question":"What CSS property is used for specifying the area outside a box?"}, //margin
                    {"label":"Question 16", "value":1, "question":"What type of bracket is used for HTML tags?"}, //< >
                    {"label":"Question 17", "value":1, "question":"What type of bracket is used for CSS rules?"}, // { }
                    {"label":"Question 18", "value":1, "question":"Which HTML tag is used for specifying a paragraph?"}, //<p>
                    {"label":"Question 19", "value":1, "question":"What should always be the very first line of code in your HTML?"}, //<!DOCTYPE html>
                    {"label":"Question 20", "value":1, "question":"What HTML tag holds all of the metadata tags for your page?"}, //<head>
                    {"label":"Question 21", "value":1, "question":"In CSS, what character separates a property from a value?"}, // colon
                    {"label":"Question 22", "value":1, "question":"What HTML tag holds all of your CSS code?"}, // <style>
                    {"label":"Question 23", "value":1, "question":"What file extension should you use for your web pages?"}, // .html
                    {"label":"Question 24", "value":1, "question":"Which coding language is used for marking up content and structure on a web page?"}, // HTML
                    {"label":"Question 25", "value":1, "question":"Which coding language is used for specifying the design of a web page?"}, // CSS
                    {"label":"Question 26", "value":1, "question":"Which coding language is used for adding functionality to a web page?"}, // JavaScript
                    {"label":"Question 27", "value":1, "question":"What CSS property is used for making the edges of a box visible?"}, // border
                    {"label":"Question 28", "value":1, "question":"What character symbol is used at the end of each CSS statement?"},//semi-colon
                    {"label":"Question 29", "value":1, "question":"By default, how wide is a <div> box?"}, //100%
                    {"label":"Question 30", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"}, //comma
                    {"label":"Question 31", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 32", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 33", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 34", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 35", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 36", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 37", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 38", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 39", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 40", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 41", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 42", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 43", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 44", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 45", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 46", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 47", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 48", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 49", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 50", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 51", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 52", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 53", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 54", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 55", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 56", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 57", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 58", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 59", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 60", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 61", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 62", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 63", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 64", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 65", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 66", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 67", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 68", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 69", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 70", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 71", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 72", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 73", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 74", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 75", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 76", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 77", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 78", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 79", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 80", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 81", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 82", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 83", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 84", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 85", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 86", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 87", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 88", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 89", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 90", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 91", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 92", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 93", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 94", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 95", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 96", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 97", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 98", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 99", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
                    {"label":"Question 100", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"},
        ];
        var svg = d3.select('#chart')
            .append("svg")
            .data([data])
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + padding.top + padding.bottom);
        var container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
        var vis = container
            .append("g");

        var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);
        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");

        arcs.append("path")
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });
        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            })
            .attr("text-anchor", "end")
            .text( function(d, i) {
                return data[i].label;
            });
        container.on("click", spin);
        function spin(d){

            container.on("click", null);
            //all slices have been seen, all done
            console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
            if(oldpick.length == data.length){
                console.log("done");
                container.on("click", null);
                return;
            }
            var  ps       = 360/data.length,
                 pieslice = Math.round(1440/data.length),
                 rng      = Math.floor((Math.random() * 1440) + 360);

            rotation = (Math.round(rng / ps) * ps);

            picked = Math.round(data.length - (rotation % 360)/ps);
            picked = picked >= data.length ? (picked % data.length) : picked;
            if(oldpick.indexOf(picked) !== -1){
                d3.select(this).call(spin);
                return;
            } else {
                oldpick.push(picked);
            }
            rotation += 90 - Math.round(ps/2);
            vis.transition()
                .duration(3000)
                .attrTween("transform", rotTween)
                .each("end", function(){
                    //mark question as seen
                    d3.select(".slice:nth-child(" + (picked + 1) + ") path")
                        .attr("fill", "#111");
                    //populate question
                    d3.select("#question h1")
                        .text(data[picked].question);
                    oldrotation = rotation;

                    container.on("click", spin);
                });
        }
        //make arrow
        svg.append("g")
            .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
            .append("path")
            .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
            .style({"fill":"black"});
        //draw spin circle
        container.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 60)
            .style({"fill":"white","cursor":"pointer"});
        //spin text
        container.append("text")
            .attr("x", 0)
            .attr("y", 15)
            .attr("text-anchor", "middle")
            .text("SPIN")
            .style({"font-weight":"bold", "font-size":"30px"});


        function rotTween(to) {
          var i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
          };
        }


        function getRandomNumbers(){
            var array = new Uint16Array(1000);
            var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
            if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
                window.crypto.getRandomValues(array);
                console.log("works");
            } else {
                //no support for crypto, get crappy random numbers
                for(var i=0; i < 1000; i++){
                    array[i] = Math.floor(Math.random() * 100000) + 1;
                }
            }
            return array;
        }
    </script>
</body>
</html>

最佳答案

声明弧后，使用:

arcs.append("path")
    .attr("fill", function (d, i) { return i % 2 == 0 ? "red" : "blue"; })
    .attr("d", function (d) { return arc(d); });

关于javascript - 如何将颜色更改为红色和蓝色而不是随机的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41103949/

文章推荐： javascript - Zone.js 将错误的 currentZone 值传递给 onInvoke Hook

文章推荐： javascript - 在DataTable中更改页面时如何显示确认弹出窗口

文章推荐： c++ - 使用 json 库创建 json 字符串

文章推荐： c++ - 如何调用父类的同名虚函数

红色 vid 打开窗口最大化
当运行这段代码时，它会以默认大小打开窗口: View [ text "window open with default size" ] 如果 a 明确给出一个大小，它将打开一个具有该大小的窗口
winforms - DataGridViewImageColumn 红色 x
我创建了一个 DataGridView 并添加了一个 DataGridViewImageColumn(使用设计器)。 DataGridView 具有“AllowUserToAddRows = true
iPhone 图标 - 红色 # 指示器
如何实现红色数字指示器(例如电子邮件计数通知)？最佳答案您正在寻找的是 applicationIconBadgeNumber 属性，它是 UIApplication 的属性。要从应用中的任何位置
javascript - 传感器有效负载十六进制到文本 Node 红色
我很想得到一些知道如何解释如何在红色 Node 中创建十六进制到“文本”解码器的人的意见。我有一个 Elsys 传感器，可以生成包含温度、湿度等信息的有效载荷十六进制。交付的有效负载是“0100d
javascript - Node 红色。从对象数组中获取项目
我正在使用 node-red 程序，并且使用 OPCUA Node ，该 Node 在有效负载中返回对象数组。我需要获取对象的一些变量，例如项目的nodeId；我尝试使用下一种格式: var new
java - 当黑莓操作系统显示相机权限警报并且用户单击调用结束(红色)按钮时如何正确退出黑莓应用程序
我们开发了一个在 OS 6 及更高版本上使用 Blackberry BarcodeScanner 类解码 QR 码的应用程序。当调用条形码扫描仪屏幕时，操作系统对相机权限和应用程序的警告被隐藏，即它进
ios - SpriteKit 红色 X
我需要 SprikeKit 方面的帮助或建议。我的应用程序/游戏通过了 Apple 审查，但后来我收到了一些关于图形的投诉(大红色 X)。我正在使用 spriteNodeWithImageNamed
html - 垂直对齐 div 红色
有人可以看看我的 jsfiddle，看看是否可以使红色 div 在中间垂直对齐，并使红色 div 也居中。您必须使包含红色 div 的 div 具有一定高度 jsFiddle
html - 我不希望我的子页面继承父主题的链接颜色(红色)，我该怎么做？
我不希望我的子页面继承父主题的链接颜色(红色)，而是我希望我的子页面上有白色链接，我应该在 html/css 中更改什么才能实现这一点？父页面CSS a{ text-decoration:no
c# - "System"警告颜色(红色)
我想尽可能使用系统颜色。如何选择不包含在系统颜色中的颜色？两者都是SystemColors WPF 类，SystemColors GetSysColor 的 WinForms 类和 COLOR_*
Android:以编程方式处理电源(红色)按钮下的功能
有谁知道如何以编程方式处理 Android HTC 设备红色(电源)按钮以停止我的操作。当用户在我的屏幕上时按下 REd 按钮时，我想停止运行我的一些操作。我知道对于像后退按钮这样的其他按钮，我可以使
python - 使用python仅在R(红色) channel 中显示图像
嗨，我是图像处理方面的新手，现在我正在使用 python 处理图像以获得更多洞察力。但是，我对颜色 channel 的理解有点不满意。在我看来，形状为 (400, 400, 3) 的 RGB 图像意
红色:*** 错误:单词没有值(value)!调用外部库函数时
我正在遵循此处红色文档中的示例:http://static.red-lang.org/red-system-specs.html#section-14 这是我的代码: Red [] #import [
aptana - 禁用 Aptana 红色/黄色波浪线
十分钟的谷歌搜索不断返回相同的答案，但在我的情况下无效。我想禁用 Aptana 为制作这些波浪线所做的一切。我找到了几个指向 Window->Preferences->General->Editor
arrays - 红色/系统中指向 'array' 的指针
如何在 Red/System 中创建指向数组中第一个元素的指针？将地址分配给指针没有问题: my-integer: 1 ptr: declare pointer! [integer!] ptr: :
javascript - webview .canGoBack 显示为错误(红色)
我希望 webview 在按下后退按钮时显示上一页我正在使用 .canGoBack 来完成此操作，但“.canGoBack”和“.GoBack”带有红线下划线，声明 ==== “无法从静态上下文引用非
ios - 红色 cocoa pod 文件
有谁知道为什么在 Xcode 项目的导航器中我的 Pods.xcodeproj 文件以红色列出？我假设这意味着 Xcode 无法找到该文件，那么我如何确保它确实存在于项目中。谢谢! 最佳答案在工作
java - HotSpot 堆栈防护页。红色/黄色区域及其背后的原因
Java 线程堆栈组织由以下描述 diagram in comments .所以 1 glibc guard page 似乎是由 pthread_attr_init(pthread_attr*) 设置
html - IE9 Facebook 点赞按钮红色
我在一个 Conceal 的模态 div 中有一个类似于 facebook 的按钮，当用户单击一个按钮时，模态就会出现。不幸的是，出现的 facebook 按钮上有一个红色矩形，见下图: 我用的是I
css - 红色 instagram 通知气泡 - css
我真的很想在 css 中创建红色的 instagram 泡泡用如图所示的圆形尖端: 除了圆头，我几乎什么都有，但我不确定我应该如何做到最好...... 这是我目前所拥有的: .notif { di

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将颜色更改为红色和蓝色而不是随机的？