D3.js 在线性尺度上使用顺序尺度

Question

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

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

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

Answer 1

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

条形图，就其本质而言，是由代表 分类变量 的条形构成的。这意味着条形图位于代表分类变量的标签上，即定性变量。当我说 "a lot of people get this wrong" 时，我在谈论条形图和直方图之间的区别：两者都使用矩形来编码数据，但在直方图中，与条形图不同， label 表示一个定量变量。我一个月至少六次在 S.O 看到某人。发布关于 直方图 实际上是条形图的问题，或者关于 条形图 实际上是直方图的问题。

因此，根据您的数据：

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

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

因此，假设我们使用每个单独数据的索引号来标记此条形图中的条形（单击 "run code snippet"）：

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>

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

D3.js 在线性尺度上使用顺序尺度

D3.js using ordinal scale over linear scale

javascript

math

data-visualization

scale

d3.js