时间戳

首页 > 解决方案 > D3 - 2 种不同的酒吧填充物

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

问题描述

我在这里有一个 plunker - 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
  }));

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

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

标签： d3.js

解决方案

以下是我可以立即想到的两种不同方法：

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

    这里棘手的部分是设置内部条形偏移，但您可以清楚地看到那里的逻辑： Difference between the bandwidth of the scales/2

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

希望这可以帮助。

推荐阅读