D3.js使用序数比例超过线性标度 [英] D3.js using ordinal scale over linear scale

问题描述

为什么用它而不是线性刻度来进行有序的条形聊天更好？我听到的论点是，这可以保持数据集的顺序，但如果将单个数据的索引号设置为x坐标，也不能这样做吗？

Why is it better to use this instead of a linear scale for making an ordered bar chat? The argument that I've heard is that this can keep the data sets in order, but can't this also be done if one sets the index number of the individual data as the x-coordinate?

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

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

推荐答案

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

The reason you should use an ordinal scale instead of a linear scale is simple, although a lot of people get this wrong:

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

Bar charts, by their very nature, are made of bars representing a categorical variable. It means that the bars are positioned over a label that represents a categorical variable, i.e., a qualitative variable. When I said "a lot of people get this wrong" I was talking about the difference between a bar chart and a histogram: both use rectangles to encode data, but in a histogram, unlike a bar chart, the label represents a quantitative variable. At least a half dozen times a month I see someone here at S.O. posting a question about histograms which are in fact bar charts, or about bar charts which are in fact histograms.

所以，鉴于你的数据：

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

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

The first bar corresponds to 5, the second bar corresponds to 10, and so on. The difference among the values of the bar is quantitative (for instance, "10 is twice as big as 5"), but the difference among the bars themselves is qualitative.

因此，假设我们使用每个单独数据的索引号来标记此条形图中的条形图（单击运行代码段）：

So, suppose we use the index number of each individual datum for labelling the bars in this bar chart (click "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等标签一样。

We see numbers, from 0 to 9, in the horizontal axis. Now comes the important part: those numbers are not in fact numbers: they are qualitative variables. You have the bar number 0, the bar number 1, the bar number 2... but the difference between the bars (the bars per se, not their values) is qualitative, not quantitative (in that sense, 4 is not 2 times 2). They are just symbols, as if we had used "A", "B", "C" and so on for the labels.

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

Of course, you can simply sort the data to display an ascending or descending bar chart, but that fundamentally changes the relationship between each bar and its value. If you use an array of objects, you can keep the relationship. For instance, have a look at this next snippet: the bars are sorted, but the categorical variable of each bar is the same of your original data.

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>

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

Therefore, that's why we use an ordinal scale (which defines the categorical variables) to create a bar chart.

这篇关于D3.js使用序数比例超过线性标度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！