D3.js version3 scale.ordinal() 没有按照我想要的方式读取我的数据

Question

我正在使用 d3.js v3 构建一个点图直方图，并且我正在尝试根据我从 csv 文件中读取的一个变量（它是城市，其中有 10 个）对我的数据进行颜色编码。问题是当我在浏览器中运行时，每个点都是相同的颜色。

有人知道怎么回事吗？

这是我的代码的快照：

var data = d3.csv('happy.csv', function(data) {

data.forEach(function(d) {
    d["index"] = d["index"];
    d["name"] = d["name"];
    d["city"] = d["city];
    ...
 })

var colorScheme = d3.scale.ordinal()
                .domain(data, (function(d) {
                    return d.city
                }))
                .range(["#FFADAF", "#FFC980", "#D9D9D9", "#9DACCB", "#95D1A5", 
                "#F586C6", "#BFDD81", "#F18489", "#80BCEC", "#FEFEA9"]);

...

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.index + 1)
})
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7.5)
.attr("cy", function(d) {
    return y(d)
})
.style("fill", function (d) { return colorScheme(d.city); } )

})

Answer 1

您将数据数组中的每个项目绑定到groups，然后使用该数据创建一个数据数组以绑定到子圈子：

return d.range(1, +d.index + 1);

问题是 d3.range 只是为指定范围生成一个数字数组。这个绑定数据没有city 属性，这只是一个数字：绑定到父group 的原始数据没有任何痕迹，作为绑定到子数据的一部分。因此，每次您尝试通过 d.city 为圆圈着色时，您都会将 undefined 传递给比例尺，因为这是传递给比例尺的唯一值，所以所有圆圈都是相同的颜色。

相反，您可以使用d3.range 和array.map() 将对象数组绑定到继承城市属性的子对象：

return d3.range(1, +d.index + 1).map(function(c) {
  return {city: d.city, index: c}
})

现在我们将 city 属性转入圈子：

var data = [
  {index: 5, city: "A"},
  {index: 4, city: "B"},
  {index: 6, city: "C"}
];

var colorScheme = d3.scale.ordinal()
                .domain(data, (function(d) {
                    return d.city
                }))
                .range(["#FFADAF", "#FFC980", "#D9D9D9", "#9DACCB", "#95D1A5", 
                "#F586C6", "#BFDD81", "#F18489", "#80BCEC", "#FEFEA9"]);

var svg = d3.select("body").append("svg");

var groups = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform",function(d,i) {
    return "translate("+[0,i*20]+")";
  })

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.index + 1).map(function(c) {
      return {city: d.city, index: c}
    })
})
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7.5)
.attr("cx", function(d,i) {
  return i*20+10;
})
.attr("cy", function(d,i) {
    return 60;
})
.style("fill", function (d) { return colorScheme(d.city); } )

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

或者，我们可以在为圆圈着色时使用d3.select(this.parentNode).datum() 访问父数据：

.style("fill", function (d) { return    colorScheme(d3.select(this.parentNode).datum().city); } )

如下：

var data = [
  {index: 5, city: "A"},
  {index: 4, city: "B"},
  {index: 6, city: "C"}
];

var colorScheme = d3.scale.ordinal()
                .domain(data, (function(d) {
                    return d.city
                }))
                .range(["#FFADAF", "#FFC980", "#D9D9D9", "#9DACCB", "#95D1A5", 
                "#F586C6", "#BFDD81", "#F18489", "#80BCEC", "#FEFEA9"]);

var svg = d3.select("body").append("svg");

var groups = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform",function(d,i) {
    return "translate("+[0,i*20]+")";
  })

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.index + 1)
})
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7.5)
.attr("cx", function(d,i) {
  return i*20+10;
})
.attr("cy", function(d,i) {
    return 60;
})
.style("fill", function (d) { return colorScheme(d3.select(this.parentNode).datum().city); } )

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

或者，我们可以在父级应用填充，而完全不为子级应用填充：

var data = [
  {index: 5, city: "A"},
  {index: 4, city: "B"},
  {index: 6, city: "C"}
];

var colorScheme = d3.scale.ordinal()
                .domain(data, (function(d) {
                    return d.city
                }))
                .range(["#FFADAF", "#FFC980", "#D9D9D9", "#9DACCB", "#95D1A5", 
                "#F586C6", "#BFDD81", "#F18489", "#80BCEC", "#FEFEA9"]);

var svg = d3.select("body").append("svg");

var groups = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform",function(d,i) {
    return "translate("+[0,i*20]+")";
  })
  .attr("fill", function(d) { return colorScheme(d.city); })

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.index + 1)
})
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7.5)
.attr("cx", function(d,i) {
  return i*20+10;
})
.attr("cy", function(d,i) {
    return 60;
})

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