D3 - 2 种不同的酒吧填充物

Question

我这里有一个笨蛋 - https://plnkr.co/edit/avVtvdm8Q8tnClAqYxlH?p=preview

它是一个条形图，在 x 轴的每个点上显示两个不同的数据点。

这些条在 xscale 中具有相同的填充设置

var x = d3.scaleBand()
  .range([0, width])
  .padding(.33)
  .domain(data.map(function(d) { 
    return d.phase
  }));

我喜欢绿色条有更多的填充，所以在红色条内

如何在绿条上设置不同的填充。

Answer 1

以下是我能马上想到的两种不同的方法：

1. 设置偏移量以定义内部条形宽度应比外部条形宽度小多少，并相应地调整条形。

   var offset = 10;
   chart.selectAll(".bar").attr("x", (d, i) => {
     return i%2 ? x(d.phase)+offset/2 : x(d.phase)
   })
   .attr("y", (d, i) => {
      return y(d.finish);
    })
   .attr("width", (d,i) => {
      return i%2 ? x.bandwidth()-offset : x.bandwidth();
   })
   

   Plunkr： https://plnkr.co/edit/2ZSKGmjj3ntJEA3KGq9e?p=preview

2. 为绿色条设置不同的比例（我更喜欢这种方法）：

   var x1 = d3.scaleBand()
    .range([0, width])
    .padding(.56)
    .domain(data.map(function(d) { 
      return d.phase
   })); 
   

   相应地，更改条形属性：

   chart.selectAll(".bar")
     .attr("x", (d, i) => {
       return i % 2 ? x(d.phase)+(Math.abs(x1.bandwidth()-x.bandwidth())/2) : x(d.phase)
     })
     .attr("y", (d, i) => {
       return y(d.finish);
     })
   
     .attr("width", (d, i) => {
       return i % 2 ? x1.bandwidth() : x.bandwidth()
     })
   

   这里棘手的部分是设置内部条偏移，但您可以清楚地看到那里的逻辑： 秤的带宽差异/2

   Plunkr：https://plnkr.co/edit/X5vFB99JBHkfGvSIfXAo?p=preview

希望这会有所帮助。