Как уменьшить отступы между барами в сгруппированной гистограмме?

1

У меня есть сгруппированная гистограмма на основе D3. Есть ли способ, которым я могу уменьшить разрыв между барами в каждой группе, а не между группами. У меня фиксированная ширина для каждого бара.

Фрагмент следующим образом:

//DATA
var data = [
  {
    category: "test4",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test4",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test3",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test3",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test1",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test1",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test2",
    type1: 150,
    type2: 100,
    type3: 0,
    column: "column1"
  },
  {
    category: "test2",
    type1: 0,
    type2: 0,
    type3: 400,
    column: "column2"
  }
];

var groupData = d3
  .nest()
  .key(function(d) {
    return d.column + d.category;
  })
  .rollup(function(v) {
    return {
      ...v[0],
      total: v[0].type1 + v[0].type2 + v[0].type3
    };
  })
  .entries(data)
  .map(function(d) {
    return { ...d.value };
  });


//INITIAL SETUP
var margin = { top: 30, right: 10, bottom: 50, left: 40 };
var width = groupData.length * 80 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var barwidth = 40;

var tip = d3
  .tip()
  .attr("class", "d3-tip")
  .html(function(d) {
    return "<span>Test</span>";
  });

var graph = d3
  .select("#chart-area")
  .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 + ")");

graph.call(tip);

var x0 = d3
  .scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.1);

var x1 = d3.scaleBand().padding(0.05);

var y = d3.scaleLinear().range([height, 0]);

var y1 = d3.scaleBand();

var z = d3.scaleOrdinal().range(["#98abc5", "#8a89a6"]);

var stack = d3.stack();

x0.domain(
  data.map(function(d) {
    return d.category;
  })
);
x1
  .domain(
    data.map(function(d) {
      return d.column;
    })
  )
  .range([0, x0.bandwidth()])
  .padding(0.2);

z.domain(Object.keys(data[0]).filter(x => x !== "category" && x !== "column"));
var keys = z.domain(); //["type1", "type2", "type3"];

var stackData = stack.keys(keys)(groupData);

y.domain([
  0,
  d3.max(groupData, function(d) {
    return d.total;
  })
]);
var serie = graph
  .selectAll(".serie")
  .data(stackData)
  .enter()
  .append("g")
  .attr("class", "serie")
  .attr("fill", function(d) {
    return z(d.key);
  });

serie
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("class", "serie-rect")
  .attr("transform", function(d) {
    return "translate(" + x0(d.data.category) + ",0)";
  })
  .attr("x", function(d) {
    return x1(d.data.column) + x1.bandwidth() / 2 - 20;
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", barwidth)
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide);

graph
  .append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x0));

graph
  .append("g")
  .attr("class", "axis")
  .call(d3.axisLeft(y).ticks(null, "s"));
#chart-area {
  width: 600px;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<div id="chart-area"></div>
  • 0
    не scaleBand ширину панели жестко, используйте параметр padding scaleBand
  • 0
    @rioV8. RioV8. Мне нужно, чтобы ширина бара была 40, и это плохо, но это требование.
Теги:
d3.js
svg

1 ответ

1

Измените paddingOuter во внутреннем масштабе. Например:

x1.paddingOuter(0.5);

Вот код с этим изменением.

//DATA
var data = [
  {
    category: "test4",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test4",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test3",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test3",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test1",
    type1: 100,
    type2: 200,
    type3: 0,
    column: "column1"
  },
  {
    category: "test1",
    type1: 0,
    type2: 0,
    type3: 500,
    column: "column2"
  },
  {
    category: "test2",
    type1: 150,
    type2: 100,
    type3: 0,
    column: "column1"
  },
  {
    category: "test2",
    type1: 0,
    type2: 0,
    type3: 400,
    column: "column2"
  }
];

var groupData = d3
  .nest()
  .key(function(d) {
    return d.column + d.category;
  })
  .rollup(function(v) {
    return {
      ...v[0],
      total: v[0].type1 + v[0].type2 + v[0].type3
    };
  })
  .entries(data)
  .map(function(d) {
    return { ...d.value };
  });


//INITIAL SETUP
var margin = { top: 30, right: 10, bottom: 50, left: 40 };
var width = groupData.length * 80 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var barwidth = 40;

var tip = d3
  .tip()
  .attr("class", "d3-tip")
  .html(function(d) {
    return "<span>Test</span>";
  });

var graph = d3
  .select("#chart-area")
  .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 + ")");

graph.call(tip);

var x0 = d3
  .scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.1);

var x1 = d3.scaleBand().padding(0.05);

var y = d3.scaleLinear().range([height, 0]);

var y1 = d3.scaleBand();

var z = d3.scaleOrdinal().range(["#98abc5", "#8a89a6"]);

var stack = d3.stack();

x0.domain(
  data.map(function(d) {
    return d.category;
  })
);
x1
  .domain(
    data.map(function(d) {
      return d.column;
    })
  )
  .range([0, x0.bandwidth()])
  .paddingOuter(0.5);

z.domain(Object.keys(data[0]).filter(x => x !== "category" && x !== "column"));
var keys = z.domain(); //["type1", "type2", "type3"];

var stackData = stack.keys(keys)(groupData);

y.domain([
  0,
  d3.max(groupData, function(d) {
    return d.total;
  })
]);
var serie = graph
  .selectAll(".serie")
  .data(stackData)
  .enter()
  .append("g")
  .attr("class", "serie")
  .attr("fill", function(d) {
    return z(d.key);
  });

serie
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("class", "serie-rect")
  .attr("transform", function(d) {
    return "translate(" + x0(d.data.category) + ",0)";
  })
  .attr("x", function(d) {
    return x1(d.data.column) + x1.bandwidth() / 2 - 20;
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", barwidth)
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide);

graph
  .append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x0));

graph
  .append("g")
  .attr("class", "axis")
  .call(d3.axisLeft(y).ticks(null, "s"));
#chart-area {
  width: 600px;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<div id="chart-area"></div>

Как видите, это одновременно уменьшит расстояние между сгруппированными столбиками и увеличит расстояние между группами (потому что, очевидно, я не изменяю диапазон внешнего масштаба). Кроме того, не имеет отношения к вашему вопросу: вы перезаписываете отступ во внутренней шкале.

  • 0
    Когда есть только одна группа. Бары перекрываются.
  • 0
    Если есть только одна группа, это не сгруппированная гистограмма. Поэтому это другая проблема, требующая другого решения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню