3

我有一个约 7500 个项目的列表，它们都有相似的签名：

{
    revenue: integer,
    title: string,
    sector: string
}

收入将在 0 到 10 亿之间。我想构建一个规模，使得给定特定公司的收入......它返回其相对于以下“桶”的位置：

$0-5 Million
$5-10 Million
$10-25 Million
$25-50 Million
$50-100 Million
$100-250 Million
> $250 Million

我相信我应该能够通过 d3 中的量化或分位数比例来实现这一点，但是很难获得预期的结果。到目前为止，我有类似的东西：

var max_rev = 1000000000 // 1 Billion
scale = d3.scale.quantize().domain(_.range(max_rev)).range([5000000, 10000000, 25000000, 50000000, 100000000, 250000000])

一个明显的问题是调用 _.range(max_rev) 创建了一个 10 亿长的数组，所以我想知道如何更有效地做到这一点（比如 .domain([0, 1000000000])？）

定义此比例的最佳方法是什么，以便 scale(75000000) 将返回 50000000。一旦我有了它，我可以对照哈希检查它并返回正确的标签：

{
    ...
    ...
    50000000: "$50-100 Million",
    100000000: "$100-250 Million",
    ...

}

非常感谢！如果我可以提供任何其他信息，请告诉我。

4

1 回答 1

5

在这种情况下，量化比例不起作用，因为您的域和范围没有均匀分割。相反，您可以使用阈值比例。

这是一个例子：

var dollars = d3.format("$,d"),
  data = d3.range(100).map(function(d, i) {
      return {
          revenue: parseInt(Math.random() * 1000000000),
          title: "Company " + i,
          sector: "Sector " + parseInt(Math.random() * 10)
      }
  }),
  quantize = d3.scale.threshold()
                     .domain([5000000, 10000000, 25000000, 50000000, 100000000, 250000000])
                     .range([0, 5000000, 10000000, 25000000, 50000000, 100000000, 250000000]);

var table = d3.select("#info").append("table");

table.append("thead").append("tr").selectAll("th")
    .data(['company', 'sector', 'revenue', 'quantized_revenue'])
  .enter()
    .append("td")
    .text(function(d) {
      return d;
    });

var rows = table.append("tbody").selectAll("tr")
    .data(data)
  .enter()
    .append("tr")
    .attr("class", "company")

rows.append("td").text(function(d) {
    return d.title;
});
rows.append("td").text(function(d) {
    return d.sector;
});
rows.append("td").text(function(d) {
    return dollars(d.revenue);
});
rows.append("td").text(function(d) {
    return dollars(quantize(d.revenue));
});
table {
    width: 100%;
}
thead {
    background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="info"></div>

有趣的是：

  quantize = d3.scale.threshold()
                     .domain([5000000, 10000000, 25000000, 50000000, 100000000, 250000000])
                     .range([0, 5000000, 10000000, 25000000, 50000000, 100000000, 250000000]);

domain设置与输入值进行比较的阈值并定义range输出。只是碰巧在这种情况下，range基本上与 相同domain，但不一定如此。range可以是颜色值列表、定义条形高度的像素等。

您甚至可以这样做，并避免在哈希表中查找结果：

var dollars = d3.format("$,d"),
  data = d3.range(100).map(function(d, i) {
      return {
          revenue: parseInt(Math.random() * 1000000000),
          title: "Company " + i,
          sector: "Sector " + parseInt(Math.random() * 10)
      }
  }),
  quantize = d3.scale.threshold()
                     .domain([5000000, 10000000, 25000000, 50000000, 100000000, 250000000])
                     .range(["$0-5", "$5-10", "$10-25", "$25-50", "$50-100", "$100-250",  "> $250"].map(function(d) { return d + " Million"; }));

var table = d3.select("#info").append("table");

table.append("thead").append("tr").selectAll("th")
    .data(['company', 'sector', 'revenue', 'quantized_revenue'])
  .enter()
    .append("td")
    .text(function(d) {
      return d;
    });

var rows = table.append("tbody").selectAll("tr")
    .data(data)
  .enter()
    .append("tr")
    .attr("class", "company")

rows.append("td").text(function(d) {
    return d.title;
});
rows.append("td").text(function(d) {
    return d.sector;
});
rows.append("td").text(function(d) {
    return dollars(d.revenue);
});
rows.append("td").text(function(d) {
    return quantize(d.revenue);
});
table {
    width: 100%;
}
thead {
    background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="info"></div>

于 2015-02-12T23:21:37.647 回答