ds3.js颜色范围。

时间:2018-06-15 20:03:47

标签: javascript d3.js

我正在尝试创建一个sunburst,其中每个类别都是不同的颜色。我可以使用多达20种颜色,但我有20多个变量。所以,我想有更多的颜色可供选择。我并不擅长Java脚本,任何帮助将不胜感激。这是我在R中运行的当前代码,它产生20种颜色。

const puppeteer = require('puppeteer-lambda');
const test1 = require("./test1.js");
const test2 = require("./test2.js")

exports.handler = async function(event, context) {

    let browser = await puppeteer.getBrowser({headless: true});

    //run test

    let tests = [test1.test, test2.test];

    //run all test cases in parallel
    let result = await Promise.all(tests.map(test => test(browser)));

    //output logs of each test case
    for (let log of result) {
        console.log(log);
    }

    await browser.close();
    console.log("All tests finish running");
}

在堆栈溢出处阅读另一篇文章,看起来我需要列出我想要的颜色列表并将其放入下面显示的20种颜色的源代码中。

CognitoUserPool:
  Type: AWS::Cognito::UserPool
  Properties:
    UserPoolName: cognito_sls_backend_user_pool_2
    AutoVerifiedAttributes:
        - email
    MfaConfiguration: "OFF"
    EmailVerificationSubject: "Your Fly Box verification code"
    EmailVerificationMessage: "Your Fly Box verification code is {####}."
    # SmsAuthenticationMessage: "Your Digispeaker authentication code is 
{####}."


    Schema:
      - Name: email
        AttributeDataType: String
        Mutable: true
        Required: false
      - Name: password
        AttributeDataType: String
        Mutable: true
        Required: false
# Cognito - Client
CognitoUserPoolClient:
  Type: AWS::Cognito::UserPoolClient
  Properties:
    ClientName: cognito_sls_backend_client
    UserPoolId:
      Ref: CognitoUserPool
# Cognito - Identity
CognitoIdentityPool:
  Type: AWS::Cognito::IdentityPool
  Properties:
    IdentityPoolName: cognito_sls_backend_identity_pool
    AllowUnauthenticatedIdentities: false
    CognitoIdentityProviders:
      - ClientId:
          Ref: CognitoUserPoolClient
        ProviderName:
          Fn::GetAtt: [CognitoUserPool, ProviderName]
# Cognito roles
CognitoIdentityPoolRoles:
  Type: AWS::Cognito::IdentityPoolRoleAttachment
  Properties:
    IdentityPoolId:
      Ref: CognitoIdentityPool
    Roles:
      authenticated:
        Fn::GetAtt: [CognitoAuthRole, Arn]
      unauthenticated:
        Fn::GetAtt: [CognitoUnauthRole, Arn]
CognitoAuthRole:
  Type: AWS::IAM::Role
  Properties:
    RoleName: appAuthRole
    Path: /
    AssumeRolePolicyDocument:
      Version: "2012-10-17"
      Statement:
        - Effect: "Allow"
          Principal:
            Federated: "cognito-identity.amazonaws.com"
          Action:
            - "sts:AssumeRoleWithWebIdentity"
          Condition:
            StringEquals:
              "cognito-identity.amazonaws.com:aud":
                Ref: CognitoIdentityPool
            "ForAnyValue:StringLike":
              "cognito-identity.amazonaws.com:amr": authenticated
    Policies:
      - PolicyName: "CognitoAuthorizedPolicy"
        PolicyDocument:
          Version: "2012-10-17"
          Statement:
            - Effect: "Allow"
              Action:
                - "mobileanalytics:PutEvents"
                - "cognito-sync:*"
                - "cognito-identity:*"
              Resource: "*"
            - Effect: "Allow"
              Action:
                - "execute-api:Invoke"
              Resource: "*"
CognitoUnauthRole:
  Type: AWS::IAM::Role
  Properties:
    RoleName: appUnauthRole
    Path: /
    AssumeRolePolicyDocument:
      Version: "2012-10-17"
      Statement:
        - Effect: "Allow"
          Principal:
            Federated: "cognito-identity.amazonaws.com"
          Action:
            - "sts:AssumeRoleWithWebIdentity"
          Condition:
            StringEquals:
              "cognito-identity.amazonaws.com:aud":
                Ref: CognitoIdentityPool
            "ForAnyValue:StringLike":
              "cognito-identity.amazonaws.com:amr": unauthenticated
    Policies:
      - PolicyName: "CognitoUnauthorizedPolicy"
        PolicyDocument:
          Version: "2012-10-17"
          Statement:
            - Effect: "Allow"
              Action:
                - "mobileanalytics:PutEvents"
                - "cognito-sync:*"
                - "cognito-identity:*"
              Resource: "*"

我再一次不太了解java脚本并且无法使其工作。我将不胜感激任何帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

你的示例代码在这里为我抛出一个错误,说d3_rgbString是未定义的,它在源代码中定义,并且仅在内部用于d3的某些方法。但是,你过于复杂,范围是一个数组(在这种情况下是颜色)。你有一个数组 - 但不是颜色,数字,d3_rgbString旨在将这些数字转换为可用于着色元素的字符串(在此扩展代码):

colorArray.map(function(color) { return d3_rgbString(color); })

其中colorArray是数值颜色值的数组。

这为我们提供了一个带有.map颜色字符串的新数组。 (较新版本的d3实际上采用不同的方法,使用d3的长字符串,然后将字符串拆分为表示每种颜色的子字符串)。

最简单的解决方案是将您的数字转换为字符串,最简单的方法是删除0x并添加#,同时将每种颜色放在引号中 - 这样您就可以删除{ {1}}。如果你不得不提出颜色,输入.map()将花费与"#123456"一样多的时间,你不需要提供一个函数来将你的数字转换为字符串(尽管我想这个网站上有很多关于从数字中获取RGB字符串的帖子,如果你想用你自己的函数替换d3_rgbString,那么就可以轻松实现。 使用不需要调整的颜色字符串的一个优点是你可以轻松地使用标准的css颜色名称

因此,只需将0x123456颜色数组提供给n,您就可以获得具有任意数量颜色的比例:

d3.scale.ordinal().range()
var d3_category30 = [
  "#1f77b4", "#aec7e8",
  "#ff7f0e", "#ffbb78",
  "#2ca02c", "#98df8a",
  "#d62728", "#ff9896",
  "#9467bd", "#c5b0d5",
  "#e377c2", "#f7b6d2",
  "#7f7f7f", "#c7c7c7",
  "#bcbd22", "#dbdb8d",
  "#17becf", "#9edae5",
  "salmon","lightsalmon",
  "lightsteelblue","steelblue",
  "yellow","orange",
  "#cccccc","#dddddd","#eee","#aaa",
  "#123456","black"
];

d3.scale.category30 = function() {
    return d3.scale.ordinal().range(d3_category30);
};

var color = d3.scale.category30();

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

svg.selectAll("circle")
 .data(d3.range(30))
 .enter()
 .append("circle")
 .attr("cx", function(d,i) { return i%15 * 20 + 20; })
 .attr("cy", function(d,i) { return Math.floor(i/15) * 20 + 20 })
 .attr("r", 10)
 .attr("fill", function(d) { return color(d); })