Question

这是我正在处理的最后一个视觉效果，而且我在为某些数据组应用正确的色阶方面遇到了麻烦。

画布分为3个svgs，svg中的两个圆环图像列一样。 svg上半部分的圆环图属于北英格兰，底部的图表属于南英格兰的数据。

我已将数据名称分为两类，应用我想要的颜色，然后尝试应用颜色的if / else语句（这是我以前在此处看到的一种技术网站和我之前使用过的网站。然而，这并不适用于这种视觉效果......我希望通过编程来提升我的游戏并且不想对颜色进行硬编码，即使这个项目的截止日期是几周之后（所以我有充足的时间。）

干杯

df$legend <- paste0(df$id,": ",df$label)

ggplot(df, aes(x, y)) +
  geom_point(aes(fill = legend), alpha = 0) +
  geom_point() +
  geom_label(aes(label = id), nudge_x = 0.2) +
  scale_fill_discrete(name = "Index") +
  theme(legend.key = element_blank(),
        legend.key.width = unit(0, "cm"),
        legend.title.align=0.5)

Answer 1

您的JS代码有两个错误：if else (... - 错误的运算符顺序，d.data.name应为d.data.City

  if (NE.indexOf(d.data.name) >= 0) {
    result = colorNE(d.data.name);
  } if else (SE.indexOf(d.data.name) >= 0) {
    result = colorSE(d.data.name);
  } else {

请参阅固定版本代码段：

var employed1 = [{
  City: 'Bradford City',
  Percentage: 54.63
}, {
  City: 'Leeds',
  Percentage: 62.19
}, {
  City: 'Liverpool',
  Percentage: 55.62
}, {
  City: 'Manchester',
  Percentage: 60.50
}, {
  City: 'Sheffield',
  Percentage: 59.03
}];

var employed2 = [{
  City: 'Brighton',
  Percentage: 65.29
}, {
  City: 'Bristol',
  Percentage: 66.72
}, {
  City: 'Luton',
  Percentage: 62.87
}, {
  City: 'Milton Keynes',
  Percentage: 67.80
}, {
  City: 'Southampton',
  Percentage: 67.36,
}];

var unemployed1 = [{
  City: 'Bradford City',
  Percentage: 15.52
}, {
  City: 'Leeds',
  Percentage: 6.96
}, {
  City: 'Liverpool',
  Percentage: 9.76
}, {
  City: 'Manchester',
  Percentage: 10.71
}, {
  City: 'Sheffield',
  Percentage: 5.33
}];

var unemployed2 = [{
  City: 'Brighton',
  Percentage: 5.33
}, {
  City: 'Bristol',
  Percentage: 5.51
}, {
  City: 'Luton',
  Percentage: 8.50
}, {
  City: 'Milton Keynes',
  Percentage: 5.17
}, {
  City: 'Southampton',
  Percentage: 5.44
}];

var other3 = [{
  City: 'Bradford City',
  Percentage: 29.85
}, {
  City: 'Leeds',
  Percentage: 30.85
}, {
  City: 'Liverpool',
  Percentage: 34.62
}, {
  City: 'Manchester',
  Percentage: 28.79
}, {
  City: 'Sheffield',
  Percentage: 33.76
}];

var other4 = [{
  City: 'Bradford City',
  Percentage: 29.38
}, {
  City: 'Leeds',
  Percentage: 27.77
}, {
  City: 'Liverpool',
  Percentage: 28.63
}, {
  City: 'Manchester',
  Percentage: 27.03
}, {
  City: 'Sheffield',
  Percentage: 27.30
}];

const NE = ["Bradford City", "Leeds", "Liverpool", "Manchester", "Sheffield"];

var colorNE = d3.scaleOrdinal()
  .domain(NE)
  .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

const SE = ["Brighton", "Bristol", "Luton", "Milton Keynes", "Southampton"];

var colorSE = d3.scaleOrdinal()
  .domain(SE)
  .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D"]);

var mentalHealthAndAlcoholPie = d3.pie()
  .value(function(d) {
    return d.Percentage
  })
  .sort(function(a, b) {
    return a.City.localeCompare(b.City);
  });

var arcGenerator = d3.arc()
  .innerRadius(100)
  .outerRadius(135)
  .padAngle(.02)
  .padRadius(50);

draw("svg1", employed1);
draw("svg1", employed2);
draw("svg2", unemployed1);
draw("svg2", unemployed2);
draw("svg3", other3);
draw("svg3", other4);

function draw(selector, data) {

  var arcData = mentalHealthAndAlcoholPie(data);

  var svg = d3.select("#" + selector)
    .append("svg")
    .attr("width", 1000)
    .attr("height", 450)
    .append("g")
    .attr("transform", "translate(200, 250)");

  svg.selectAll(null)
    .data(arcData)
    .enter()
    .append('path')
    .attr("fill", function(d) {
      var result = null;

      if (NE.indexOf(d.data.City) >= 0) {
        result = colorNE(d.data.City);
      } else if (SE.indexOf(d.data.City) >= 0) {
        result = colorSE(d.data.City);
      } else {

        result = "white";
      }
      return result;
    })
    .style("stroke", "white")
    .attr('d', arcGenerator);

  svg.append("text")
    .selectAll('text')
    .data(arcData)
    .enter()
    .append('text')
    .each(function(d) {
      var centroid = arcGenerator.centroid(d);
      d3.select(this)
        .attr('x', centroid[0])
        .attr('y', centroid[1])
        .attr('dy', '0.30em')
        .text(d.label)
    });
}

.container1 {
  width: 355px;
  position: absolute;
  flex-direction: column;
  font-size: 10px;
}

.container2 {
  width: 355px;
  position: absolute;
  flex-direction: column;
  transform: translate(400px, 0px);
}

.container3 {
  width: 355px;
  position: absolute;
  flex-direction: column;
  transform: translate(800px, 0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css" />


<div class="container1" id="svg1"></div>
<div class="container2" id="svg2"></div>
<div class="container3" id="svg3"></div>

Answer 2

您可以使用d3 color schemes。你必须改变这样的尺度：

var colorNE = d3.scaleOrdinal(d3.schemeCategory10)
  .domain(NE);

var colorSE = d3.scaleOrdinal(d3.schemeCategory20)
  .domain(SE);

但是那时你的数据必须总是在同一个序列中（根据城市名称），这是个坏主意。你最好创建自己的规模。

特定数据的特定颜色标度

2 个答案: