Question

我试图重新创建Mike Bostock的pie chart small multiples。 Bostock为每个饼图制作一个SVG，并使用整数数组作为数据集：

var data = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

就我而言，我希望使用d3.csv加载一系列对象并将其用作我的数据。 CSV看起来像这样：

count_1,count_2
4.39,1.64
0.4894,0.0413
32.661,11.343

显然，我搞砸了一些非常基本的东西，但我是一个菜鸟，并且无法弄清楚是什么。这是我的剧本（我在Mike Bostock的评论中留下了他原来的剧本）：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>

body {
  text-align: center;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>

// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.

d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  var dataset1 = data

console.log(dataset1)



var test_dataset = [
[4.39,1.64],
[0.4894,0.0413],
[32.661,11.343],
[24.61,100.0875],
[1.969142857,0.505642857],
[6.186428571,3.160357143],
[0.604761905,3.774738095],
[6.0212,2.4136],
[1.2275,0.2935],
[1.1012,1.0771],
[5.605666667,19.395],
];

console.log(test_dataset)



// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as `d.name`. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var m = 10,
    r = 100,
    z = d3.scale.ordinal()
                    .domain([d.right, d.wrong])
                    .range(["e7969c","9ecae1"])

// Insert an svg element (with margin) for each row in our dataset. A child g
// element translates the origin to the pie center.
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");//translate from corner of svg

// The data for each svg element is a row of numbers (an array). We pass that to
// d3.layout.pie to compute the angles for each arc. These start and end angles
// are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
// on the arc, not the layout.
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(r / 2)
        .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

});


function type(d) {
  d.right = +d.count_1;
  d.wrong= +d.count_2;
  return d;
}

</script>
</body>
</html>

我首先解释了Mike关于设置z的评论，因此：

 z = d3.scale.ordinal()
                    .domain([d.right, d.wrong])
                    .range(["e7969c","9ecae1"])

但是会导致以下错误：

未捕获的ReferenceError：d未定义

(anonymous function) @ (index):55 (anonymous function) @ d3.v3.min.js:1 t @ d3.v3.min.js:1 u @ d3.v3.min.js:1

然后我尝试以另一种方式设置比例：

z = d3.scale.ordinal()
                .domain([function(d) { return d.right;}, function(d) { return d.wrong;}])
                .range(["e7969c","9ecae1"])

但是这会导致另一个错误： TypeError：a.map不是函数

我已经设置了block with an example of what's going on。我非常确定有一些非常基本的东西，我不会理解，所以会很感激任何人的投入。

Answer 1

您希望将type函数的结果作为您的域名传递（d.right，d.wrong），您实际上从未真正调用type。< / p>

找出要传递到type的数据，并使用该type调用，并在您的域中使用结果，如.domain([d.right, d.wrong])

如何在d3中使用对象的字段作为序数范围的域？

1 个答案: