javascript - D3.js 在线性刻度上使用序数刻度

Question

为什么使用它而不是线性刻度来制作有序的酒吧聊天更好？我听到的说法是这样可以保持数据集的有序性，但是如果将单个数据的索引号设置为 x 坐标是不是也可以做到这一点？

dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))

Answer 1

你应该使用顺序尺度而不是线性尺度的原因很简单，尽管很多人都犯了这个错误:

条形图，就其本质而言，是由代表分类变量的条形图组成的。这意味着条形位于表示分类变量(即定性变量)的标签上。当我说“很多人都弄错了”时，我是在谈论条形图和直方图之间的区别:两者都使用矩形来编码数据，但在直方图中，与条形图不同，标签代表一个定量变量。我每个月至少有六次在 S.O. 见到某人。发布有关直方图(实际上是条形图)或关于条形图(实际上是直方图)的问题。

因此，根据您的数据:

dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

第一条对应 5，第二条对应 10，依此类推。条形图值之间的差异是定量的(例如，“10 是 5 的两倍”)，但条形图本身之间的差异是定性的。

因此，假设我们使用每个单独数据的索引号来标记此条形图中的条形(单击“运行代码片段”):

var w = 300,
  h = 200,
  padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

var xScale = d3.scaleBand()
  .range([30, w])
  .domain(d3.range(dataset.length))
  .padding(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, padding])
  .domain([0, d3.max(dataset)]);

var bars = svg.selectAll("foo")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("width", xScale.bandwidth())
  .attr("height", d => h - padding - yScale(d))
  .attr("y", d => yScale(d))
  .attr("fill", "teal");

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(d3.axisBottom(xScale));
  
var gY = svg.append("g")
  .attr("transform", "translate(30,0)")
  .call(d3.axisLeft(yScale));

<script src="https://d3js.org/d3.v4.min.js"></script>

我们在横轴上看到从 0 到 9 的数字。现在是重要的部分:这些数字不是实际上是数字:它们是定性变量。您有条形编号 0、条形编号 1、条形编号 2...但是条形之间的差异(条形本身，而不是它们的值)是定性的，而不是定量的(从这个意义上说，4 不是 2 倍2).它们只是符号，就好像我们使用“A”、“B”、“C”等作为标签一样。

当然，您可以简单地对数据进行排序以显示升序或降序条形图，但这从根本上改变了每个条形与其值之间的关系。如果使用对象数组，则可以保持关系。例如，请看下一个片段:条形已排序，但每个条形的分类变量与您的原始数据相同。

var w = 300,
  h = 200,
  padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

var data = [];

dataset.forEach((d,i)=>data.push({index: i, value:d}));

data.sort((a,b)=>d3.descending(a.value, b.value));

var xScale = d3.scaleBand()
  .range([30, w])
  .domain(data.map(d=>d.index))
  .padding(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, padding])
  .domain([0, d3.max(data, d=>d.value)]);

var bars = svg.selectAll("foo")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d) => xScale(d.index))
  .attr("width", xScale.bandwidth())
  .attr("height", d => h - padding - yScale(d.value))
  .attr("y", d => yScale(d.value))
  .attr("fill", "teal");

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(d3.axisBottom(xScale));
  
var gY = svg.append("g")
  .attr("transform", "translate(30,0)")
  .call(d3.axisLeft(yScale));

<script src="https://d3js.org/d3.v4.min.js"></script>

因此，这就是我们使用序数尺度(定义分类变量)来创建条形图的原因。