如何使这些数据分组的条在D3中更靠近在一起？

问题描述 投票：0回答：1

我正在尝试修复D3.js图表​​中分组条形的边距。

现在，它有这样的难看的缺口：

https://i.imgur.com/MGJAUJg.jpg

但是我需要让每个组看起来都像这样，以x轴标签（月和年）为中心：

enter image description here

我认为此行代码是罪魁祸首，但我不知道如何修改它：.attr("x", function(d) { return x1(d.grpName); })

请参阅下面的代码段为整页。

const groupData = [
                 { key: "Jan. 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:26},
                                                {grpName:'Team2', grpValue:15},
                                                {grpName:'Team3', grpValue:48}
                                              ]
                 },
                 { key: "Feb.2020", values:
                                              [
                                                {grpName:'Team1', grpValue:14},
                                                {grpName:'Team2', grpValue:23},
                                                {grpName:'Team3', grpValue:5}
                                              ]
                 },
                 { key: "March 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:32},
                                                {grpName:'Team2', grpValue:9},
                                                {grpName:'Team3', grpValue:25}
                                              ]
                 },
                 { key: "April 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:41},
                                                {grpName:'Team2', grpValue:55},
                                                {grpName:'Team3', grpValue:26}
                                              ]
                 }                            
                  ];


    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1200 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    
   
    var x0  = d3.scaleBand().rangeRound([0, width], .5);
    var x1  = d3.scaleBand();
    var y   = d3.scaleLinear().rangeRound([height, 0]);

    var xAxis = d3.axisBottom().scale(x0)
                              

    var yAxis = d3.axisLeft().scale(y);

    const color = d3.scaleOrdinal(d3.schemeCategory10);

  var svg = d3.select('#barChart')
    .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 + ")");

    var categoriesNames = groupData.map(function(d) { return d.key; });
    var rateNames       = groupData[0].values.map(function(d) { return d.grpName; });

    x0.domain(categoriesNames);
    x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(groupData, function(key) { return d3.max(key.values, function(d) { return d.grpValue; }); })]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);


    svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
        .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .style('font-weight','bold')
            .text("Value");

    svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

    var slice = svg.selectAll(".slice")
      .data(groupData)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; });

      slice.selectAll("rect")
      .data(function(d) { return d.values; })
        .enter().append("rect")
            .attr("width", "35")
            .attr("x", function(d) { return x1(d.grpName); })
             .style("fill", function(d) { return color(d.grpName) })
             .attr("y", function(d) { return y(0); })
             .attr("height", function(d) { return height - y(0); })
            .on("mouseover", function(d) {
                d3.select(this).style("fill", d3.rgb(color(d.grpName)).darker(2));
            })
            .on("mouseout", function(d) {
                d3.select(this).style("fill", color(d.grpName));
            });


    slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.grpValue); })
      .attr("height", function(d) { return height - y(d.grpValue); });

      //Legend
  var legend = svg.selectAll(".legend")
      .data(groupData[0].values.map(function(d) { return d.grpName; }).reverse())
  .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
      .style("opacity","0");

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d) { return color(d); });

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {return d; });

  legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;\
    shape-rendering: crispEdges;
  }
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="barChart"></div>
javascript d3.js data-visualization
1个回答
0
投票

您有两个x刻度，x0和x1，第一个放置组，第二个放置每个组中的条。但是，使用x0.bandwidth()定义每个组的宽度时，使用35定义每个条形的宽度。

如果x0.bandwidth()小于或大于条形数量的35倍，我们将得到一些尴尬的定位。

相反，应该使用x1.bandwidth()设置钢筋宽度，就像使用x0.bandwidth设置组宽度（x1的范围）一样。

如果您使用x1.bandwidth()设置条形宽度，则会获得与相邻条形相接触的条形，但是现在您可以使用scaleBand.padding()来设置组和条形之间的边距：

 x0.padding(0.1);  // space the groups: bandwidth 90% of original, now with 10% margin
 x1.padding(0.1); // same for spacing the bars

在一起：

const groupData = [
                 { key: "Jan. 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:26},
                                                {grpName:'Team2', grpValue:15},
                                                {grpName:'Team3', grpValue:48}
                                              ]
                 },
                 { key: "Feb.2020", values:
                                              [
                                                {grpName:'Team1', grpValue:14},
                                                {grpName:'Team2', grpValue:23},
                                                {grpName:'Team3', grpValue:5}
                                              ]
                 },
                 { key: "March 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:32},
                                                {grpName:'Team2', grpValue:9},
                                                {grpName:'Team3', grpValue:25}
                                              ]
                 },
                 { key: "April 2020", values:
                                              [
                                                {grpName:'Team1', grpValue:41},
                                                {grpName:'Team2', grpValue:55},
                                                {grpName:'Team3', grpValue:26}
                                              ]
                 }                            
                  ];


    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1200 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    
   
    var x0  = d3.scaleBand().rangeRound([0, width], .5).padding(0.1);
    var x1  = d3.scaleBand().padding(0.1);
    var y   = d3.scaleLinear().rangeRound([height, 0]);

    var xAxis = d3.axisBottom().scale(x0)
                              

    var yAxis = d3.axisLeft().scale(y);

    const color = d3.scaleOrdinal(d3.schemeCategory10);

  var svg = d3.select('#barChart')
    .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 + ")");

    var categoriesNames = groupData.map(function(d) { return d.key; });
    var rateNames       = groupData[0].values.map(function(d) { return d.grpName; });

    x0.domain(categoriesNames);
    x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(groupData, function(key) { return d3.max(key.values, function(d) { return d.grpValue; }); })]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);


    svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
        .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .style('font-weight','bold')
            .text("Value");

    svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

    var slice = svg.selectAll(".slice")
      .data(groupData)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; });

      slice.selectAll("rect")
      .data(function(d) { return d.values; })
        .enter().append("rect")
            .attr("width", x1.bandwidth())
            .attr("x", function(d) { return x1(d.grpName); })
             .style("fill", function(d) { return color(d.grpName) })
             .attr("y", function(d) { return y(0); })
             .attr("height", function(d) { return height - y(0); })
            .on("mouseover", function(d) {
                d3.select(this).style("fill", d3.rgb(color(d.grpName)).darker(2));
            })
            .on("mouseout", function(d) {
                d3.select(this).style("fill", color(d.grpName));
            });


    slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.grpValue); })
      .attr("height", function(d) { return height - y(d.grpValue); });

      //Legend
  var legend = svg.selectAll(".legend")
      .data(groupData[0].values.map(function(d) { return d.grpName; }).reverse())
  .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
      .style("opacity","0");

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d) { return color(d); });

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {return d; });

  legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
.axis path,
  .axis line {
    fill: none;
    stroke: #000;\
    shape-rendering: crispEdges;
  }
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="barChart"></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.