如何在 D3 轴和图表之间应用填充？

Question

通常图表数据从 Y 轴底部和 X 轴左侧开始。但是我有这个我试图在 D3 中创建的条形图，它从 Y 轴底部上方 30px 和 X 轴左侧右侧 30px 开始（参见 mock-up design强>下面）。 30px 的内边距也应保持在顶部和右侧。

我无法理解这应该如何实现，因为轴线仍应一直绘制，但刻度线和条形图数据应一直填充 30 像素，并且应保持比例.

注意：为了清楚起见，我删除了其余的刻度和刻度值。 X 轴刻度应放置在每个条的中间。

Answer 1

为了达到您想要的效果，您必须更改天平的设置。既然你有一个条形图，我假设你有：

• x 位置的带刻度；
• y 位置的线性刻度；

另外，由于您没有分享任何运行代码，我将根据basic bar chart from d3noob 来回答。

第一步是设置填充：

const horPadding = 30;
const vertPadding = 30;

现在让我们更改音阶：

乐队规模

为了在波段比例中设置填充，我们将使用scale.paddingOuter。

因为传递给该方法的值是scale.step() 的倍数（也就是说，如果你传递1 它等于传递scale.step()），我们将使用它来计算30px 的填充。数学很简单：

scale.paddingOuter(horPadding / x.step());

线性刻度

这里的数学有点复杂。基本上，我们将计算我们必须低于零才能获得精确的 30px（假设您的下域为零，这是条形图中非常基本的规则！）。

这可以用这个作为域的第一个值来完成，替换0：

-(d3.max(data, function(d) {
    return d.sales;
}) * vertPadding / height)

这里，sales 是用于条形高度的属性，height 显然是用于刻度和轴的高度。根据您的需要更改它们。

然后，不要忘记使用scale(0) 设置矩形的底边。在我要分享的 d3noob 代码中：

return y(0) - y(d.sales); 

结果如下：

var csv = `salesperson,sales
Bob,33
Robin,12
Anne,41
Mark,16
Joe,59
Eve,38`;

const horPadding = 30;
const vertPadding = 30;

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var x = d3.scaleBand()
  .range([0, width])
  .padding(0.1);
var y = d3.scaleLinear()
  .range([height, 0]);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

const data = d3.csvParse(csv, d3.autoType);

x.domain(data.map(function(d) {
    return d.salesperson;
  }))
  .paddingOuter(horPadding / x.step());

y.domain([-(d3.max(data, function(d) {
  return d.sales;
}) * vertPadding / height), d3.max(data, function(d) {
  return d.sales;
})])


svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.salesperson);
  })
  .attr("width", x.bandwidth())
  .attr("y", function(d) {
    return y(d.sales);
  })
  .attr("height", function(d) {
    return y(0) - y(d.sales);
  });

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

svg.append("g")
  .call(d3.axisLeft(y));

.bar {
  fill: steelblue;
}

<script src="//d3js.org/d3.v4.min.js"></script>