如何减少分组条形图中条形之间的填充？

Question

我有一个基于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>

Answer 1

更改paddingOuter中的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>

正如您所看到的，这将同时减少分组条之间的距离并增加组之间的距离（因为，显然，我没有改变外部比例的范围）。 此外，与您的问题无关：您正在覆盖内部比例的填充。