D3.js 饼图色阶

Question

考虑这样的数据集：

var pie_data = [{
    "hard_skill": "Strategy",
    "course_area_percentage": 9
}, {
    "hard_skill": "Analytics",
    "course_area_percentage": 18
}, {
    "hard_skill": "Economics",
    "course_area_percentage": 11
}, {
    "hard_skill": "Finance",
    "course_area_percentage": 7
}, {
    "hard_skill": "HR",
    "course_area_percentage": 5
}, {
    "hard_skill": "Innovation",
    "course_area_percentage": 2
}, {
    "hard_skill": "International",
    "course_area_percentage": 5
}, {
    "hard_skill": "Marketing",
    "course_area_percentage": 7
}, {
    "hard_skill": "Operations",
    "course_area_percentage": 14
}, {
    "hard_skill": "Others",
    "course_area_percentage": 11
}, {
    "hard_skill": "Project",
    "course_area_percentage": 11
}]

我正在创建一个饼图，以便将所有这些技能显示为图表的切片。然后的想法是给具有更高百分比的技能从红色到绿色的颜色更绿（意味着它更重要）。

我试过使用 d3.scale.ordinal() and d3.scale.linear() 不同的范围和域，但颜色与上述模式不匹配。它们好像是倒过来的，像这样：

我的色标代码：

var pie_colorScale = d3.scale.ordinal()
    //.domain([0,pie_data.length])
    //.range(["#d7191c", "#eef200", "#008e15"]);                    
    //.range(["#d7191c","#f19d00","#eef200","#3fe256", "#008e15"]);
    .range(["#008e15", "#3fe256", "#eef200", "#f19d00", "#d7191c"]);

是否必须手动设置颜色到值的映射？

Answer 1

鉴于您想要的结果...

the idea then is to give a greener color (meaning it is more important), from a red to green color scale, to the skill that has higher percentage.

...，序数尺度不是合适的选择。

您可以使用范围内有两种颜色的线性刻度，"red" 和 "green"，但结果并不好。因此，此解决方案使用范围内的三种颜色："red"、"yellow" 和 "green".

这样做的技巧是在域中使用三个值：

var color = d3.scale.linear()
    .domain([d3.min(pie_data, d => d.course_area_percentage),
        d3.mean(pie_data, d => d.course_area_percentage),
        d3.max(pie_data, d => d.course_area_percentage)
    ])
    .range(["red", "yellow", "green"]);

这是一个演示：

var pie_data = [{
  "hard_skill": "Strategy",
  "course_area_percentage": 9
}, {
  "hard_skill": "Analytics",
  "course_area_percentage": 18
}, {
  "hard_skill": "Economics",
  "course_area_percentage": 11
}, {
  "hard_skill": "Finance",
  "course_area_percentage": 7
}, {
  "hard_skill": "HR",
  "course_area_percentage": 5
}, {
  "hard_skill": "Innovation",
  "course_area_percentage": 2
}, {
  "hard_skill": "International",
  "course_area_percentage": 5
}, {
  "hard_skill": "Marketing",
  "course_area_percentage": 7
}, {
  "hard_skill": "Operations",
  "course_area_percentage": 14
}, {
  "hard_skill": "Others",
  "course_area_percentage": 11
}, {
  "hard_skill": "Project",
  "course_area_percentage": 11
}]
var width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;


var color = d3.scale.linear()
 .domain([d3.min(pie_data, d=>d.course_area_percentage),
 d3.mean(pie_data, d=>d.course_area_percentage),
 d3.max(pie_data, d=>d.course_area_percentage)])
 .range(["red", "yellow", "green"]);

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.course_area_percentage;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(pie_data))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .style("stroke", "gray")
  .style("fill", function(d) {
    return color(d.data.course_area_percentage);
  });

g.append("text")
.attr("text-anchor", "middle")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
    return d.data.hard_skill;
  });

function type(d) {
  d.population = +d.population;
  return d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

作为替代解决方案，如果您想使用您在问题中编写的颜色数组...

.range(["#008e15", "#3fe256", "#eef200", "#f19d00", "#d7191c"]);

...您应该改用量化（或分位数）标度：

var color = d3.scale.quantize()
    .domain(d3.extent(pie_data, d => d.course_area_percentage))
    .range(["#d7191c", "#f19d00", "#eef200", "#3fe256", "#008e15"]);

这是演示：

var pie_data = [{
  "hard_skill": "Strategy",
  "course_area_percentage": 9
}, {
  "hard_skill": "Analytics",
  "course_area_percentage": 18
}, {
  "hard_skill": "Economics",
  "course_area_percentage": 11
}, {
  "hard_skill": "Finance",
  "course_area_percentage": 7
}, {
  "hard_skill": "HR",
  "course_area_percentage": 5
}, {
  "hard_skill": "Innovation",
  "course_area_percentage": 2
}, {
  "hard_skill": "International",
  "course_area_percentage": 5
}, {
  "hard_skill": "Marketing",
  "course_area_percentage": 7
}, {
  "hard_skill": "Operations",
  "course_area_percentage": 14
}, {
  "hard_skill": "Others",
  "course_area_percentage": 11
}, {
  "hard_skill": "Project",
  "course_area_percentage": 11
}]
var width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;


var color = d3.scale.quantize()
 .domain(d3.extent(pie_data, d=>d.course_area_percentage))
 .range(["#d7191c", "#f19d00", "#eef200", "#3fe256", "#008e15"]);

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.course_area_percentage;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(pie_data))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
 .style("stroke", "gray")
  .style("fill", function(d) {
    return color(d.data.course_area_percentage);
  });

g.append("text")
.attr("text-anchor", "middle")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
    return d.data.hard_skill;
  });

function type(d) {
  d.population = +d.population;
  return d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

D3.js 饼图色阶

D3.js pie chart color scale

javascript

charts

d3.js

pie-chart