Question

我有一些颜色问题......我正在使用我在网上找到的模板，我正在努力将颜色应用到圆圈而不用硬编码......

基本上（并且对于编码我的数据而不是使用csv文件感到遗憾），我希望在4月，6月和10月的数据元素中应用某种颜色。那么其中的数据元素是否有单独的颜色？所以4月份的儿童元素将是蓝色，7月份将是红色，Octobers将是绿色。

另外，我希望每个节点的文本都变小。所以，而不是有一个不会显示某个值以下的文本的函数，我希望文本变得更小，然后有一个函数不会显示低于7000的值的文本，如果你得到我的意思？

我再一次为我输入数据的方式道歉。

（我只包含了javascript）

干杯

编辑！我找到了一种方法，可以为每个季节的孩子添加特定的颜色。它可能效率低下，但它有效（并且它不是硬编码的！）。但我仍然在努力根据数据值更改文字大小。

  var data = {
  "name": "The World",
  "children": [{
      "name": "April",
      "children": [{
        "name": "Bolivia",
        "value": 3613,
      }, {
        "name": "Brazil",
        "value": 1115167,
      }, {
        "name": "Peru",
        "value": 81082,
      }, {
        "name": "Angola",
        "value": 1282,
      }, {
        "name": "Burndi",
        "value": 10064,
      }, {
        "name": "Madagascar",
        "value": 16658,
      }, {
        "name": "Malawi",
        "value": 1338,
      }, {
        "name": "Rwanda",
        "value": 8734,
      }, {
        "name": "Zimbabwe",
        "value": 2191,
      }, {
        "name": "Papa New Guinea",
        "value": 28735,
      }, {
        "name": "Timor-Leste",
        "value": 857,
      }]
    }, {
    "name": "July",
    "children": [{
        "name": "Cuba",
        "value": 5716,
      }, {
        "name": "Dominican Rebpublic",
        "value": 14313,
      }, {
        "name": "Haiti",
        "value": 10951,
      }, {
        "name": "Tanzania",
        "value": 22378,
      }, {
        "name": "Zambia",
        "value": 1218,
      }, {
        "name": "Philippines",
        "value": 14327,
      }]
    }, {
      "name": "October",
      "children": [{
        "name": "Colombia",
        "value": 331738,
      }, {
        "name": "Costa Rica",
        "value": 57043,
      }, {
        "name": "El Salvador",
        "value": 45573,
      }, {
        "name": "Guatemala",
        "value": 109461,
      }, {
        "name": "Honduras",
        "value": 98918,
      }, {
        "name": "Mexico",
        "value": 122305,
      }, {
        "name": "Nicaragua",
        "value": 39943,
      }, {
        "name": "Panama",
        "value": 4426,
      }, {
        "name": "Cameroon",
        "value": 22075,
      }, {
        "name": "Central Africa",
        "value": 2987,
      }, {
        "name": "Congo, Dem, Rep. of",
        "value": 16727,
      }, {
        "name": "Côte d'ivoire",
        "value": 74893,
      }, {
        "name": "Ethiopia",
        "value": 133963,
      }, {
        "name": "Ghana",
        "value": 1171,
      }, {
        "name": "Guinea",
        "value": 7604,
      }, {
        "name": "Kenya",
        "value": 27668,
      }, {
        "name": "Nigeria",
        "value": 1279,
      }, {
        "name": "Sierra Leone",
        "value": 1371,
      }, {
        "name": "Togo",
        "value": 4533,
      }, {
        "name": "Uganda",
        "value": 88946,
      }, {
        "name": "Laos",
        "value": 7987,
      }, {
        "name": "India",
        "value": 12500,
      }, {
        "name": "Sri Lanka",
        "value": 1151,
      }, {
        "name": "Thailand",
        "value": 27064,
      }, {
        "name": "Vietnam",
        "value": 408979,
      }, {
        "name": "Yemen",
        "value": 3068
      }]
    }]
    };

    var packLayout = d3.pack()
      .size([700, 700]);

    var rootNode = d3.hierarchy(data)

    rootNode.sum(function(d) {
      return d.value;
    });

    packLayout(rootNode);

    const seasons = ["April", "July", "October"];

    var color = d3.scaleOrdinal()
      .domain(seasons)
      .range(["#A8A7A7"]);

    const april = ["Bolivia","Brazil","Peru","Angola","Burndi","Madagascar",
    "Malawi","Rwanda","Zimbabwe","Papa New Guinea","Timor-Leste"];

    var color1 = d3.scaleOrdinal()
      .domain(april)
      .range(["#2F9599"]);

    const july = ["Cuba","Dominican Rebpublic","Haiti","Tanzania","Zambia",
    "Philippines"];

    var color2 = d3.scaleOrdinal()
      .domain(july)
      .range(["#E8175D"]);

      const october = ["Colombia","Costa Rica","El Salvador","Guatemala",
      "Honduras","Mexico","Nicaragua","Panama","Cameroon","Central Africa",
      "Congo, Dem, Rep. of","Côte d'ivoire","Ethiopia","Ghana","Guinea",
      "Kenya","Nigeria","Sierra Leone","Togo","Uganda","Laos","India",
      "Sri Lanka","Thailand","Vietnam","Yemen"];

      var color3 = d3.scaleOrdinal()
        .domain(october)
        .range(["#CC527A"]);

    var nodes = d3.select('svg g')
      .selectAll('g')
      .data(rootNode.descendants())
      .enter()
      .append('g')
      .attr('transform', function(d) {return 'translate(' + [d.x, d.y] + ')'})

    nodes
      .append('circle')
      .attr('r', function(d) { return d.r; })
      .attr("fill", function(d){
        var result = null;

        if (seasons.indexOf(d.data.name) >= 0) {
          result = color(d.data.name);
        } else if (april.indexOf(d.data.name) >= 0){
          result = color1(d.data.name);
        } else if (july.indexOf(d.data.name) >= 0){
          result = color2(d.data.name);
        } else if (october.indexOf(d.data.name) >= 0){
          result = color3(d.data.name);
        } else {
          result = "white"
        }

          return result;
        });

    nodes
      .append('text')
      .attr('dy', 4)
      .text(function(d) { if(d.data.value > 29000)
        return d.children === undefined ? d.data.name : '';
      })

Answer 1

在附加文字的位置添加font-size样式并将其作为函数返回。

＆＃13;

nodes.append('text')
  .attr('dy', 4)
  .text(function(d) { if(d.data.value > 29000)
    return d.children === undefined ? d.data.name : '';
  })
  .style("font-size", function(d){
    return d * 5 + "px";
  })

＆＃13;

或者您希望数据更改文本的大小。

特定数据值的特定字体大小

1 个答案: