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

Id像绿色的条一样具有更多的填充，因此位于红色的条中

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

Answer 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

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

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

希望这会有所帮助。

D3-2种不同的填充条

1 个答案: