主页 经验

d3 Bar Chart


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,

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 7Display data : 这是最后一步。 让我们使用以下代码在每个条上显示数据。

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

这里,宽度定义为(数据值*比例因子)。 文本元素不支持填充或边距。 出于这个原因,我们需要给它一个"dy"偏移量。 这用于垂直对齐文本。

上一个 Highcharts 第一个示例 文章列表 下一个 d3 Circle Chart

© 2019-2021 适观科技

沪ICP备17002269号