d3 Bar Chart
时间: 2021-07-19 15:16:33
(部分内容来自网络,其真实性存疑,为了避免对您造成误导,请谨慎甄别。)
Bar Chart
条形图是最常用的图形类型之一,用于显示和比较不同离散类别或组的数量,频率或其他度量(例如平均值)。 该图以这样的方式构造,即不同条的高度或长度与它们所代表的类别的大小成比例。
x轴(水平轴)表示没有比例的不同类别。 y轴(垂直轴)具有刻度,这表示测量单位。 可以垂直或水平绘制条,这取决于类别的数量和类别的长度或复杂性。
第1步:在rect元素中添加样式:让我们将以下样式添加到rect元素。
svg rect { fill: gray; }
Step 2:在文本元素中添加样式:添加以下CSS类以将样式应用于文本值。 将此样式添加到SVG文本元素。 它定义如下:
svg text { fill: yellow; font: 12px sans-serif; text-anchor: end; }
这里,Fill用于应用颜色。 文本锚用于将文本定位到条的右端。
Step 3:定义变量:让我们在脚本中添加变量。 它解释如下。
<script> var data = [10, 5, 12, 15]; var width = 300, scaleFactor = 20, barHeight = 30; </script>
Here,
Width :SVG的宽度。
Scalefactor:缩放到屏幕上可见的像素值。
Barheight:这是水平条的静态高度。
Step 4 :附加SVG元素:让我们使用以下代码在D3中添加SVG元素。
var graph = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length);
在这里,我们将首先选择文档正文,创建一个新的SVG元素然后追加它。 我们将在此SVG元素中构建条形图。 然后,设置SVG的宽度和高度。 高度计算为条形高度*数据值的数量。
我们将条形高度设为30,数据数组长度为4.然后SVG高度计算为barheight * datalength,即120 px。
Step 5 :应用转换:让我们使用以下代码在bar中应用转换。
var bar = graph.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
这里,每个栏内部对应一个元素。 因此,我们创建组元素。 我们的每个组元素都需要一个位于另一个之下,以构建一个水平条形图。 让我们采用转换公式索引*条高度。
Step 6 :将矩形元素追加到条形图:在上一步中,我们附加了组元素。 现在使用以下代码将rect元素添加到栏中。
bar.append("rect") .attr("width", function(d) { return d * scaleFactor; }) .attr("height", barHeight - 1);
这里,宽度是(数据值*比例因子),高度是(条形高度 - 边距)。ight - margin).
Step 7: Display data : 这是最后一步。 让我们使用以下代码在每个条上显示数据。
bar.append("text") .attr("x", function(d) { return (d*scaleFactor); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d; });
这里,宽度定义为(数据值*比例因子)。 文本元素不支持填充或边距。 出于这个原因,我们需要给它一个"dy"偏移量。 这用于垂直对齐文本。