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

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

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

所以，鉴于您的数据：

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

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

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

＆＃13;

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));

＆＃13;

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

＆＃13;

我们在水平轴上看到0到9之间的数字。现在是重要的部分：那些数字实际上不是：它们是定性变量。您的条形码编号为0，条形编号为1，条形编号为2 ...但是条形图之间的差异（条形图本身，而不是它们的值）是定性的，而不是定量的（在这种意义上，4不是2倍） 2）。它们只是符号，好像我们曾经使用过＆＃34; A＆＃34;，＆＃34; B＆＃34;，＆＃34; C＆＃34;等标签。

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

＆＃13;

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));

＆＃13;

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

＆＃13;

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

D3.js使用序数比例超过线性标度

1 个答案: