javascript - d3.js 条形图不太像我想要的

Question

我正在使用 d3.js(4.1 版)制作一个简单的条形图，并且我遵循了官方文档中的示例。这是我的 jsfiddle:

My current barchart

这是我的代码:

html:

<div class="diagram-wrapper">
   <div class="barchart">
       <div class="header">
        <h2>High score</h2>
       </div>
       <div class="content">

      </div>
   </div>
</div>

Js:

var data = [{
 points: 50,
 name: "gunnar"
}, {
 points: 100,
 name: "herp"
}, {
 points: 500,
 name: "Jacob"
}];

var width = 420,
 barHeight = 20;

var x = d3.scaleLinear()
 .range([0, width]);

var chart = d3.select(".diagram-wrapper div.barchart div.content")
 .append('svg')
 .attr("width", width);

x.domain([0, d3.max(data, function(d) {
 return d.points;
 })]);

chart.attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
 .data(data)
 .enter().append("g")
 .attr("transform", function(d, i) {
   return "translate(0," + i * barHeight + ")";
 });

bar.append("rect")
 .attr("width", function(d) {
   return x(d.points);
 })
 .attr("height", barHeight - 1);

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

但我能找到的所有示例都来自版本 3，或者它们使用 TSV og SCV 数据格式......我想要的是这样的:

Example of what I want

所以基本上我的问题如下:

• 如何将条形变为垂直而不是水平？

• 如何在 x 轴的条形下方添加名称？

• 如何将一些值添加到 y 轴，然后与这些点相关联？

很抱歉提出所有问题，我确实调查了文档，但是当 4.1 中的工作示例和博客文章泄露时，我无法完全理解它

谢谢

Answer 1

没有简单的方法可以将水平条形图“翻转”为垂直条形图……您几乎必须更改几乎所有代码。在这里，我将展示基本步骤(请注意，我不是在修改您的代码，而是在创建一个新代码)。

首先，数据是一样的。然后，我们附加 SVG:

var width = 400, height = 500;

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

之后，我们定义尺度。 x 轴现在是定性的，而 y 轴是定量的:

var xScale = d3.scaleBand()
  .domain(data.map(function(d){ return d.name}))
  .range([100, width])
  .paddingInner(0.2)
  .paddingOuter(0.2);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d){ return d.points})])
  .range([height - 40, 10]);

然后，我们绑定(bind)数据:

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

在数据有界的情况下，我们附加矩形。这是棘手的部分:注意我们如何计算 x、y、width 和 height:

bars.attr("x", function(d){ return xScale(d.name)})
  .attr("y", function(d){ return yScale(d.points)})
  .attr("width", xScale.bandwidth())
  .attr("height", function(d){ return (height - 40) - yScale(d.points)})
  .attr("fill", "steelblue");

然后，坐标轴:

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", `translate(0,${height-40})`)
  .call(xAxis);

svg.append("g").attr("transform", "translate(100,0)")
  .call(yAxis);

fiddle 显示代码有效:https://jsfiddle.net/gerardofurtado/o1cer41s/

PS:代码中有一些神奇的数字。另外，我使用的模板文字在您使用 IE 时将不起作用。