Question

我正在用d3.js（版本4.1）做一个简单的条形图，我已经按照官方文档中的示例进行了操作。这是我的jsfiddle：

这是我的代码：

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

然后，我们绑定数据：

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

小提琴显示代码正常工作：https://jsfiddle.net/gerardofurtado/o1cer41s/

PS：代码中有一些神奇的数字。另外，我使用的模板文字在使用IE时无法使用。

d3.js条形图不太像我想要它

1 个答案: