为什么使用它而不是线性刻度来制作有序的酒吧聊天更好?我听到的说法是这样可以保持数据集的有序性,但是如果将单个数据的索引号设置为 x 坐标是不是也可以做到这一点?
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
最佳答案
你应该使用顺序尺度而不是线性尺度的原因很简单,尽管很多人都犯了这个错误:
条形图,就其本质而言,是由代表分类变量的条形图组成的。这意味着条形位于表示分类变量(即定性变量)的标签上。当我说“很多人都弄错了”时,我是在谈论条形图和直方图之间的区别:两者都使用矩形来编码数据,但在直方图中,与条形图不同,标签代表一个定量变量。我每个月至少有六次在 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>
因此,这就是我们使用序数尺度(定义分类变量)来创建条形图的原因。
关于javascript - D3.js 在线性刻度上使用序数刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42604073/