在D3 v4中，如何讓條形的寬度以刻度爲中心？

Question

我正在使用D3 v4（大多數，如果不是全部的話，那裏是v3的例子）。回到v3，他們有一種叫做rangeBand（）的東西，它可以爲我動態地將所有東西整齊地放置在x軸上。

現在，在第4版中，我想知道該怎麼做。

我有一個條形圖：

var barEnter = vis.selectAll("g") 
        .data(rawdata) 
        .enter() 
        .append('g') 
        .append("rect") 
        .attr("class", "bar") 
        .attr("x", function(d) { return x(d.key); }) 
        .attr("y", function(d) { return y(d.value); }) 
        .attr("height", function(d) { return height - y(d.value); }) 
        .attr("width", canvas_width/rawdata.length); 

正是這條這是搞亂我的寬度。如果我將它設置爲canvas_width/rawdata.length，它很好地將條形放置在x軸上的每個刻度周圍。問題是所有的酒吧被壓在一起，並沒有填補之間。

因此，自然，我試圖做x.paddingInner(.5)這不會增加一些填充，但現在酒吧不圍繞刻度標記。與x.paddingOuter()做什麼事情更多。

四處搜尋後，我發現rangeBand()是我想要的，但這隻適用於v3。在v4文檔中，沒有看起來像它的東西。是rangeRound()？是align()？我不確定。如果任何人都可以指引我正確的方向，它將不勝感激。

Answer 1

沒有看到你的軸的代碼，我想你正在使用scaleOrdinal()。如果是這種情況，您可以更改爲scaleBand()，其中可以很容易地將條形中心對齊。

所有你需要的是：

• band.paddingInner([padding])：設置吧
• ​​3210的內部填充：使你的每個欄的帶寬。

然後，您可以使用相應的變量在數據集中的x位置和使用bandwidth()的width。

這是一個小片段向你展示它是如何工作的：

var w = 300, h = 100, padding = 20; 
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 

 
var data = [{name: "foo", value:50}, 
 
      {name: "bar", value:80}, 
 
      {name: "baz", value: 20}]; 
 

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

 
var xAxis = d3.axisBottom(xScale); 
 

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

 
bars.attr("x", function(d){ return xScale(d.name)}) 
 
    .attr("width", xScale.bandwidth()) 
 
    .attr("y", function(d){ return (h - padding) - d.value}) 
 
    .attr("height", function(d){ return d.value}) 
 
    .attr("fill", "teal"); 
 

 
var gX = svg.append("g") 
 
    .attr("transform", "translate(0," + (h - padding) + ")") 
 
    .call(xAxis);

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