我如何获得 d3.scaleOrdinal

Question

我有这个 - 我认为比较简单 - 代码片段。它像我想要的那样工作：我得到一个根据基础数据划分的饼图。但我无法获得我设计的配色方案来显示。最初我在对 scaleOrdinal 的调用中有 basedata ，但这没有区别。 如何获取 baseata 中相应条目的显示颜色？

  const svgContainer = d3.select("#d3").append("svg")
    .attr("viewBox", [-60, -60, 120, 120])
    .attr("width", 120)
    .attr("height", 120)
    .attr("style", "display: inline; float: left");

  // Generate the pie
  var basedata = [50, 1.7, 1.7, 1.7, 39.8, 1.7, 1.7, 1.7];

  var myColor = d3.scaleOrdinal()
    .domain([   50,        1.7,        1.7,          1.7,         39.8,          1.7,         1.7,          1.7    ])
    .range( ["yellow", "royalblue", "mediumblue", "darkblue", "midnightblue", "darkblue", "mediumblue", "royalblue"]);

  const arcs = d3.pie()
    .startAngle(-0.5 * Math.PI)
    .sort(null)(basedata);

  const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(120 / 2 - 1);

  const pie = d3.select("svg").append("g")
      .attr("stroke", "black")
    .selectAll("path")
    .data(arcs)
    .join("path")
      .attr("d", arc)
      .attr("fill", function (d) { return myColor(d) });

Answer 1

我找到了答案here。

不要使用 scaleOrdinal。 将填充命令替换为：.attr("fill", function (d, i) { return myColor[i] })