为什么条形图彼此重叠

Question

我在创建并排条形图时遇到问题。

酒吧彼此重叠，我希望它们并排出现。 当您悬停时，您可以看到只有一半的条会改变颜色。 在 console.log 中显示了它们的正确值。

 //set up data var sales = [ { "vendnm": "CHARNECA", "MonthAbrev": "Jan", "Vendas_Ano": 21611.950000000004, "Vendas_Ant": 16033.31 }, { "vendnm": "CHARNECA", "MonthAbrev": "Fev", "Vendas_Ano": 48108.08, "Vendas_Ant": 51142.299999999996 }, { "vendnm": "CHARNECA", "MonthAbrev": "Mar", "Vendas_Ano": 13427.280000000004, "Vendas_Ant": 21274.129999999997 }, { "vendnm": "CHARNECA", "MonthAbrev": "Apr", "Vendas_Ano": 28553.83, "Vendas_Ant": 15228.569999999998 }, { "vendnm": "CHARNECA", "MonthAbrev": "Mai", "Vendas_Ano": 19639.59, "Vendas_Ant": 10291.359999999999 }, { "vendnm": "CHARNECA", "MonthAbrev": "Jun", "Vendas_Ano": 22530.840000000007, "Vendas_Ant": 21905.29 }, { "vendnm": "CHARNECA", "MonthAbrev": "Jul", "Vendas_Ano": 20216.759999999995, "Vendas_Ant": 8276 }, { "vendnm": "CHARNECA", "MonthAbrev": "Ago", "Vendas_Ano": 39832.04, "Vendas_Ant": 49810.810000000005 }, { "vendnm": "CHARNECA", "MonthAbrev": "Set", "Vendas_Ano": 12861.52, "Vendas_Ant": 24425.32 }, { "vendnm": "CHARNECA", "MonthAbrev": "Out", "Vendas_Ano": 9227.34, "Vendas_Ant": 17804.65 }, { "vendnm": "CHARNECA", "MonthAbrev": "Nov", "Vendas_Ano": 31382.11, "Vendas_Ant": 9993.34 }, { "vendnm": "CHARNECA", "MonthAbrev": "Dez", "Vendas_Ano": 39832.04, "Vendas_Ant": 36568.7 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jan", "Vendas_Ano": 22681.14, "Vendas_Ant": 28587.71 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Fev", "Vendas_Ano": 31382.11, "Vendas_Ant": 37637.420000000006 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Mar", "Vendas_Ano": 32453.779999999995, "Vendas_Ant": 32993.12 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Apr", "Vendas_Ano": 23445.4, "Vendas_Ant": 30835.75 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Mai", "Vendas_Ano": 16471.71, "Vendas_Ant": 18028.07 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jun", "Vendas_Ano": 11617.470000000001, "Vendas_Ant": 22651.53 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jul", "Vendas_Ano": 24699.44, "Vendas_Ant": 34152.28999999999 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Ago", "Vendas_Ano": 35476.94000000001, "Vendas_Ant": 22069.699999999997 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Set", "Vendas_Ano": 37462.92, "Vendas_Ant": 23120.08 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Out", "Vendas_Ano": 22042.140000000003, "Vendas_Ant": 28449.95 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Nov", "Vendas_Ano": 16471.71, "Vendas_Ant": 30755.050000000003 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Dez", "Vendas_Ano": 24699.44, "Vendas_Ant": 22838.64 } ] d3.selectAll('input[name=type-selector]').on('change', function () { typeSelected = this.value; createBar(getDataFromType(typeSelected)); }); var typeSelected = d3.select('input[name=type-selector]:checked', '#type-selector').node().value; ///////////////////////////////////////////////// // BAR ///////////////////////////////////////////////// var svgBar = d3.select("#myChart").append("svg").attr("width", 600).attr("height", 300); var marginBar = { top: 20, right: 20, bottom: 30, left: 40 }; var widthBar = +svgBar.attr("width") - marginBar.left - marginBar.right; var heightBar = +svgBar.attr("height") - marginBar.top - marginBar.bottom; var xBar0 = d3.scaleBand().rangeRound([0, widthBar]).padding(0.1); var xBar1 = d3.scaleBand().rangeRound([0, xBar0.bandwidth()]).padding(0.1); var yBar = d3.scaleLinear().rangeRound([heightBar, 0]); var gBar = svgBar.append("g").attr('id', 'gBar').attr("transform", "translate(" + marginBar.left + ", " + marginBar.top + ")"); var gX = gBar.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + heightBar + ")"); var gY = gBar.append("g") .attr("class", "axis axis--y") createBar(getDataFromType(typeSelected)); function createBar(sales) { xBar0.domain(sales.map(function (d) { return d.MonthAbrev; })); // xBar1.domain(reduceMonth.map(function (d) { // return d.MonthAbrev; // })); yBar.domain([0, d3.max(sales, function (d) { return d.value }) + 15000]); gX.call(d3.axisBottom(xBar0.padding(0.6))); gY.call(d3.axisLeft(yBar)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end"); var bars = gBar.selectAll(".bar") .data(sales); bars.enter().append("rect") .attr("class", "bar") .merge(bars) .attr("x", (d, i) => i * (widthBar / sales.length)) .attr("y", function (d) { return yBar(d.value); }) .attr("width", xBar0.bandwidth()) .attr("height", function (d) { return heightBar - yBar(d.value); }) .on("mouseover", function (a) { console.log(a); bars.append("text") .attr("class", "title-text") .style("fill", "rgb(44, 160, 44)") .text( a.vendnm ) .attr("text-anchor", "middle") .attr("x", 400) .attr("y", 50); }) .on("mouseout", function (a) { bars.select(".title-text").remove(); }) } // return the right data function getDataFromType(type) { var arr = []; sales.forEach(function (item) { arr.push({ "vendnm": item.vendnm, "MonthAbrev": item.MonthAbrev, "value": item[type] }); }); return arr; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <head> <script src="https://d3js.org/d3.v5.js"></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> </head> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .arc text { font: 10px sans-serif; text-anchor: middle; } .arc path { stroke: #fff; } </style> <body> <div style="margin: 20px"> <div style="margin-left: 50px;" id="type-selector-container"> <form id='type-selector'> <input type='radio' name='type-selector' id='rb-1' value='Vendas_Ano' checked /> <label for='rb-1'>Vendas Ano</label> <input type='radio' name='type-selector' id='rb-2' value='Vendas_Ant' /> <label for='rb-2'>Vendas Ant</label> </form> </div> <div id="myChart"></div> </div> </body>

我是 D3.js 的初学者，在此先感谢您的帮助。

Answer 1

我能够通过基本上改变我的“x”函数来解决。 现在它看起来像这样：

 //set up data var sales = [ { "vendnm": "CHARNECA", "MonthAbrev": "Jan", "Vendas_Ano": 21611.950000000004, "Vendas_Ant": 16033.31 }, { "vendnm": "CHARNECA", "MonthAbrev": "Fev", "Vendas_Ano": 48108.08, "Vendas_Ant": 51142.299999999996 }, { "vendnm": "CHARNECA", "MonthAbrev": "Mar", "Vendas_Ano": 13427.280000000004, "Vendas_Ant": 21274.129999999997 }, { "vendnm": "CHARNECA", "MonthAbrev": "Apr", "Vendas_Ano": 28553.83, "Vendas_Ant": 15228.569999999998 }, { "vendnm": "CHARNECA", "MonthAbrev": "Mai", "Vendas_Ano": 19639.59, "Vendas_Ant": 10291.359999999999 }, { "vendnm": "CHARNECA", "MonthAbrev": "Jun", "Vendas_Ano": 22530.840000000007, "Vendas_Ant": 21905.29 }, { "vendnm": "CHARNECA", "MonthAbrev": "Jul", "Vendas_Ano": 20216.759999999995, "Vendas_Ant": 8276 }, { "vendnm": "CHARNECA", "MonthAbrev": "Ago", "Vendas_Ano": 39832.04, "Vendas_Ant": 49810.810000000005 }, { "vendnm": "CHARNECA", "MonthAbrev": "Set", "Vendas_Ano": 12861.52, "Vendas_Ant": 24425.32 }, { "vendnm": "CHARNECA", "MonthAbrev": "Out", "Vendas_Ano": 9227.34, "Vendas_Ant": 17804.65 }, { "vendnm": "CHARNECA", "MonthAbrev": "Nov", "Vendas_Ano": 31382.11, "Vendas_Ant": 9993.34 }, { "vendnm": "CHARNECA", "MonthAbrev": "Dez", "Vendas_Ano": 39832.04, "Vendas_Ant": 36568.7 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jan", "Vendas_Ano": 22681.14, "Vendas_Ant": 28587.71 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Fev", "Vendas_Ano": 31382.11, "Vendas_Ant": 37637.420000000006 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Mar", "Vendas_Ano": 32453.779999999995, "Vendas_Ant": 32993.12 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Apr", "Vendas_Ano": 23445.4, "Vendas_Ant": 30835.75 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Mai", "Vendas_Ano": 16471.71, "Vendas_Ant": 18028.07 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jun", "Vendas_Ano": 11617.470000000001, "Vendas_Ant": 22651.53 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Jul", "Vendas_Ano": 24699.44, "Vendas_Ant": 34152.28999999999 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Ago", "Vendas_Ano": 35476.94000000001, "Vendas_Ant": 22069.699999999997 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Set", "Vendas_Ano": 37462.92, "Vendas_Ant": 23120.08 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Out", "Vendas_Ano": 22042.140000000003, "Vendas_Ant": 28449.95 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Nov", "Vendas_Ano": 16471.71, "Vendas_Ant": 30755.050000000003 }, { "vendnm": "JOÃO LUIS", "MonthAbrev": "Dez", "Vendas_Ano": 24699.44, "Vendas_Ant": 22838.64 } ] d3.selectAll('input[name=type-selector]').on('change', function () { typeSelected = this.value; createBar(getDataFromType(typeSelected)); }); var typeSelected = d3.select('input[name=type-selector]:checked', '#type-selector').node().value; ///////////////////////////////////////////////// // BAR ///////////////////////////////////////////////// var svgBar = d3.select("#myChart").append("svg").attr("width", 600).attr("height", 300); var marginBar = { top: 20, right: 20, bottom: 30, left: 40 }; var widthBar = +svgBar.attr("width") - marginBar.left - marginBar.right; var heightBar = +svgBar.attr("height") - marginBar.top - marginBar.bottom; var xBar0 = d3.scaleBand().range([0, widthBar]).padding(0.1); var yBar = d3.scaleLinear().rangeRound([heightBar, 0]); var gBar = svgBar.append("g").attr('id', 'gBar').attr("transform", "translate(" + marginBar.left + ", " + marginBar.top + ")"); var gX = gBar.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + heightBar + ")"); var gY = gBar.append("g") .attr("class", "axis axis--y") createBar(getDataFromType(typeSelected)); function createBar(sales) { xBar0.domain(sales.map(function (d) { return d.MonthAbrev; })); yBar.domain([0, d3.max(sales, function (d) { return d.value }) + 15000]); var barWidth = xBar0.bandwidth() / 2; gX.call(d3.axisBottom(xBar0)); gY.call(d3.axisLeft(yBar)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end"); var bars = gBar.selectAll(".bar") .data(sales); // console.log bars.enter().append("rect") .attr("class", "bar") .merge(bars) .attr("x", function (d, i) { return xBar0(d.MonthAbrev) + barWidth * ((d.vendnm == 'CHARNECA') ? 0.2 : 1); }) .attr("y", function (d) { return yBar(d.value); }) .attr("width", barWidth - 5) .attr("height", function (d) { // console.log(d); return heightBar - yBar(d.value); }) .attr("fill", function (d) { if (d.vendnm === 'CHARNECA') { return "rgb(251,180,174)"; } else { return "rgb(179,205,227)"; } }) .on("mouseover", function (a) { gBar.append("text") .attr("class", "title-text") .style("fill", "#000000") .text( a.vendnm + ' - ' + a.MonthAbrev + ' - ' + Number(Math.round(a.value * 100) / 100).toLocaleString("es-ES", { minimumFractionDigits: 2 }) + '€' ) .attr("text-anchor", "middle") .attr("x", 200) .attr("y", 30); }) .on("mouseout", function (a) { gBar.select(".title-text").remove(); }) } // return the right data function getDataFromType(type) { var arr = []; sales.forEach(function (item) { arr.push({ "vendnm": item.vendnm, "MonthAbrev": item.MonthAbrev, "value": item[type] }); }); return arr; }

 <head> <script src="https://d3js.org/d3.v5.js"></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> </head> <style> .bar:hover { fill: brown; } .arc text { font: 10px sans-serif; text-anchor: middle; } .arc path { stroke: #fff; } </style> <body> <div style="margin: 20px"> <div style="margin-left: 50px;" id="type-selector-container"> <form id='type-selector'> <input type='radio' name='type-selector' id='rb-1' value='Vendas_Ano' checked /> <label for='rb-1'>Vendas_Ano</label> <input type='radio' name='type-selector' id='rb-2' value='Vendas_Ant' /> <label for='rb-2'>Vendas_Ant</label> </form> </div> <div id="myChart"></div> </div> </body>