d3水平分组堆积图表条形图在少量值时重叠

var json\u data=;“headers”:[“mon月”,“国家”,“,“,“数字”],,'Ros““:[2018-2018-05-05-05-01 01 00:00:00:00:00.0,法国”,7],[“2018-2018-2018-2018-2018-05-2018-05-05-01 00 00 00:00.0<varJSon \varJSon\u数据=;“header“““““““““““““““抢抢抢抢抢抢头”:“““““““““““““““““““““““““““““““““-04-01 00:00:00.0“,德国”,21“,[”2018-04-0100:00:00.0“,意大利”,37],[“2018-04-01 00:00:00.0”,“西班牙”,32],[“2018-04-01 00:00:00.0”,“英国”,129]
};
< /代码> 

一切正常,图表看起来反应灵敏:


然而,考虑到在我的代码片段中我有两个值(英国、德国),这些条重叠。我试着用这条线:

console.log(d3.scale.ordinal().rangebands([height,0],0.2));
< /代码> 

但是我想不出一种方法来让这些条响应,不管值的数量是多少。

代码段:。




-*/

var json_data=“headers”:[“month”,“country”,“number”],“rows”:[“2018-05-01 00:00:00.0”,“Germany”,19],[“2018-05-01 00:00:00.0”,“United Kingdom”,23],[“2018-04-01 00:00:00.0”,“Germany”,21],[“2018-04-01 00:00:00.0”,“United Kingdom”,129]
};

var data rows=json_data.rows;

/*-----!数据-**

/*-----函数-----*/

//创建字典函数(转换的JSON)
createdit=(数据)=>。{
让groups=data.reduce((acc,arr)=gt;。{
如果(根据HasownProperty(arr[1])){
ACC[ARR[1]].推(ARR);
}否则{
acc[arr[1]]=[arr];
}
返回ACC;
},{};

让结果=[];
用于(让g分组){
设obj=值:g_
设A=组[g][0];
设b=组[g][1];
如果(a[0]<=b[0])。{
NUM=A〔2〕;
obj.num2=b[2];
}否则{
NUM=B〔2〕;
obj.num2=A[2];
}
结果:推(obj);
}

返回结果;
}

//返回JSON字符串的特定对象的唯一值
唯一值=(data,objectnum)=>。{

var uniquevalues=[];
data.foreach(函数(项){
var值=项[objectnum];
if(uniquevalues.indexof(value)!==- 1)
返回错误;

uniquevalues.push(值);
(});

返回唯一值;
}

//图表创建功能
createChart=(数据)=>。{
//页边距惯例
console.log(数据)
var margin=上:10,右:50,下:20,左:70

var widther=window.outerwidth;

var width=widther-margin.left-margin.right,
高度=400-页边距.top-页边距.bottom;

//将svg附加到图表容器div
var svg=d3.选择(“.g-chart”).append(“svg”)
.attr(“宽度”,宽度+页边空白。左+页边空白。右)
.attr(“高度”,高度+页边距.top+页边距.bottom)
追加(“g”)
.attr(“transform”,“translate”(“+margin.left+”,“+margin.top+”));

//创建XScale
var xscale=d3.scale.linear()。
.范围([0,宽度]);

//创建yscale
var y0=d3.scale.ordinal()。
.RangeBands([高度,0],0.2)
.域(唯一值);

console.log(d3.scale.ordinal().rangebands([高度,0],0.2));
//.domain([“西班牙”、“英国”、“德国”、“法国”、“意大利”]);

//定义Y轴样式
var yaxis=d3.svg.axis()。
刻度(Y0)
.方向(“左”);

//定义Y轴样式
var xaxis=d3.svg.axis()。
刻度(X刻度)
.定向(“底部”)
.tickformat(函数(d)返回d;)
//更改百分比的轴值
//.tickformat(函数(d)返回d+“%”;)
.刻度尺寸(高度)
.ticks(numticks(width));

/格式数据
data.foreach(函数(d){
d n==n.nUm;
(});


//设置XScale的最大值
var maxx=d3.max(数据,函数(d)返回d.num;);

//定义XScale最大值
xscale.domain([0,maxx]);

//附加Y轴
var yaxisgroup=svg.append(“g”)。
.attr(“类”,“Y轴”)
调用(YAXIS);

//附加X轴
var xaxisgroup=svg.append(“g”)。
.attr(“类”,“X轴”)
调用(xAXIS);

//将数据绑定到条形图
var category group=svg.selectall(“.g-category-group”)。
数据(数据)
输入()
追加(“g”)
.attr(“类”,“G类-组”)
.attr(“转换”,函数(d){
返回“translate(0,”+y0(d.value)+”);
(});

//附加第一个条形图
var bars=categorygroup.append(“rect”)。
.attr(“宽度”,函数(d)返回XScale(d.num);)
.attr(“高度”,y0.rangeband()/2.5)
.attr(“class”,“g-num”)。
.attr(“transform”,“translate(0,4)”);

//附加第二个条形图
var bars2=categorygroup.append(“rect”)。
.attr(“宽度”,函数(d)返回XScale(d.num2);)
.attr(“高度”,y0.rangeband()/2.5)
.attr(“class”,“G-num2”)。
.attr(“transform”,“translate(0,29)”);

//将数据绑定到标签
var labelgroup=svg.selectall(“g-num”)。
数据(数据)
输入()
追加(“g”)
.attr(“class”,“g-label-group”)。
.attr(“转换”,函数(d){
返回“translate(0,”+y0(d.value)+”);
(});

//附加第一个条形图标签
var barlabels=labelgroup.append(“文本”)
.text(函数(d)返回d.num;)
.attr(“x”,函数(d)返回xscale(d.num)-20;)
.attr(“y”,y0.rangeband()/2.65)
.attr(“class”,“g-labels”);

//附加第二个条形图标签
var barlabels2=labelgroup.append(“文本”)
.text(函数(d)返回d.num2;)
.attr(“x”,函数(d)返回xscale(d.num2)-20;)
.attr(“y”,y0.rangeband()/1.25)
.attr(“class”,“g-labels”);

//追加图表源
d3.选择(“.g-source-bold”)
.text(“源:”)
.attr(“class”,“g-source-bold”);

d3.选择(“.g-source-reg”)
.text(“此处显示图表源信息”)
.attr(“class”,“g-source-reg”);


//响应能力
d3.选择(window).on(“调整大小”,调整大小);

函数大小调整()。{

/新边界
var newMargin=上:10,右:80,下:20,左:50_

//获取窗口宽度
var w=d3.选择(“.g-chart”).node().clientwidth;
console.log(“调整大小”,w);

//更改SVG的宽度
D3.选择(“SVG”)。
.attr(“宽度”,w);

//更改XScale
X标度
.range([0,w-newMargin.right]);

//更新条形图
酒吧
.attr(“宽度”,函数(d)返回xscale(d.num););

//更新第二个条形图
BARS2
.attr(“宽度”,函数(d)返回XScale(d.num2););

//更新条形图标签
条形码
.attr(“x”,函数(d)返回xscale(d.num)-20;)
.attr(“y”,y0.rangeband()/2.65)

//更新第二个条形图标签
巴拉贝尔2
.attr(“x”,函数(d)返回xscale(d.num2)-20;)
.attr(“y”,y0.rangeband()/1.25)

//更新xAXIS
XXIS集团
调用(xAXIS);

//更新蜱
X轴
刻度(X刻度)
.ticks(numticks(w));

};

//}

//根据宽度确定刻度数
函数numticks(widther){
如果(widther<=400){
返回4
console.log(“返回4”)
}
否则{
返回10
console.log(“返回5”)
}
}
}

/*-----!函数-----*/

/*-----主-----*/

var data=createdit(数据行);

//计算唯一值
var uniquevalues=uniquevalues(数据行,1);

创建图表(数据);

/*-----!主-----*/>=
*/
@导入URL(https://fonts.googleapis.com/css)家庭=卡拉);
身体{
字体系列:“karla”,无衬线;
字体大小:12px;
}

G HED {
文本对齐:左对齐;
文本转换:大写;
字体粗细:粗体;
字体大小:22px;
保证金:3PX 0;
}

.G-源-粗体{
文本对齐:左对齐;
字体大小:10px;
字体粗细:粗体;
}

G源{
保证金:10PX 0;
}

.G-源-粗体{
文本对齐:左对齐;
字体大小:10px;
}

g介绍
字体大小:16px;
页边:0px 0px 10px 0px;
}

g nUm {
填料:γ124;
}

G.NUM2 {
填充:
}

g-标签{
填充:白色;
字体粗细:粗体;
字体大小:13px;
}

轴线{
填充:无;
中风:
行程虚线阵列:2px 3px;
形状渲染:CrispEdges;
行程宽度:1px;
}

轴文本{
字体大小:13px;
指针事件:无;
填充:γ7E7E7E;
}

域{
显示:无;
}

y轴文本{
文本锚定:结束!重要的;
字体大小:14px;
填料:γ000000;
}

y轴线{
显示:无;
}

.G-基线{
脑卒中:α000;
行程宽度:1px;
stroke dasharray:无;
}<代码> < /PRE>


和身体;
<h5 class=“g-hed”></h5>
<p class=“g-intro”></p>
<DIV class=“g-chart”></DIV>
<DIV class=“g-source”><span class=“g-source-bold”></span><span class=“g-source-reg”></span></DIV>
&L/DIV & GT;
</body>>=

< / div代替json_data用这个:


var json_data = {"headers":["Month","Country","Number"],"rows":[["2018-05-01 00:00:00.0","France",7],["2018-05-01 00:00:00.0","Germany",19],["2018-05-01 00:00:00.0","Italy",35],["2018-05-01 00:00:00.0","Spain",40],["2018-05-01 00:00:00.0","UK",23],["2018-04-01 00:00:00.0","France",14],["2018-04-01 00:00:00.0","Germany",21],["2018-04-01 00:00:00.0","Italy",37],["2018-04-01 00:00:00.0","Spain",32],["2018-04-01 00:00:00.0","UK",129]
]};


一切正常,图表看起来反应灵敏:


然而,考虑到在我的代码片段中我有两个值(英国、德国),这些条重叠。我试着用这条线玩:

console.log(d3.scale.ordinal().rangeBands([height, 0], 0.2) );


但是我想不出一种方法来让这些条响应,不管值的数量是多少。

片段:



/* ----- Data ----- */

var json_data = {"headers":["Month","Country","Number"],"rows":[["2018-05-01 00:00:00.0","Germany",19],["2018-05-01 00:00:00.0","United Kingdom",23],["2018-04-01 00:00:00.0","Germany",21],["2018-04-01 00:00:00.0","United Kingdom",129]
]};

var dataRows = json_data.rows;

/* ----- !Data ----- */

/* ----- Functions ----- */

//Create dictionary function (transformed JSON)
createDict = (data) => {
  let groups = data.reduce((acc, arr) => {
    if (acc.hasOwnProperty(arr[1])) {
      acc[arr[1]].push(arr);
    } else {
      acc[arr[1]] = [arr];
    }
    return acc;
  }, {});

  let results = [];
  for (let g in groups) {
    let obj = {Value: g};
    let a = groups[g][0];
    let b = groups[g][1];
    if (a[0] <= b[0]) {
      obj.num = a[2];
      obj.num2 = b[2];
    } else {
      obj.num = b[2];
      obj.num2 = a[2];
    }
    results.push(obj);
  }
  
  return results;
}

//Returns unique values of a specific object of a JSON string
uniqueValues = (data,objectNum) => {

var uniqueValues = [];
data.forEach(function(item) {
    var value = item[objectNum];
    if (uniqueValues.indexOf(value) !== -1)
    return false;

    uniqueValues.push(value);
});

return uniqueValues;
}

//Chart creation function
createChart = (data) => {
  //Margin conventions
  console.log(data)
  var margin = {top: 10, right: 50, bottom: 20, left: 70};

  var widther = window.outerWidth;

  var width = widther - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

  //Appends the svg to the chart-container div
  var svg = d3.select(".g-chart").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 + ")");

  //Creates the xScale 
  var xScale = d3.scale.linear()
    .range([0,width]);

  //Creates the yScale
  var y0 = d3.scale.ordinal()
    .rangeBands([height, 0], 0.2) 
    .domain(uniqueValues);
    
    console.log(d3.scale.ordinal().rangeBands([height, 0], 0.2) );
    //.domain(["Spain", "UK", "Germany", "France", "Italy"]);

  //Defines the y axis styles
  var yAxis = d3.svg.axis()
    .scale(y0)
    .orient("left");

  //Defines the y axis styles
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickFormat(function(d) {return d; })
    //Change axis values for percentage
    //.tickFormat(function(d) {return d + "%"; })
    .tickSize(height)
    .ticks(numTicks(width)); 

    //FORMAT data
    data.forEach(function(d) {
      d.num = +d.num;
    });


    //Sets the max for the xScale
    var maxX = d3.max(data, function(d) { return d.num; });

    //Defines the xScale max
    xScale.domain([0, maxX ]);

    //Appends the y axis
    var yAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    //Appends the x axis    
    var xAxisGroup = svg.append("g")
      .attr("class", "x axis")
      .call(xAxis); 

    //Binds the data to the bars      
    var categoryGroup = svg.selectAll(".g-category-group")
      .data(data)
      .enter()
      .append("g")
      .attr("class", "g-category-group")
      .attr("transform", function(d) {
        return "translate(0," + y0(d.Value) + ")";
      });

    //Appends first bar   
    var bars = categoryGroup.append("rect")
      .attr("width", function(d) { return xScale(d.num); })
      .attr("height", y0.rangeBand()/2.5 )
      .attr("class", "g-num")
      .attr("transform", "translate(0,4)");

    //Appends second bar   
    var bars2 = categoryGroup.append("rect")
      .attr("width", function(d) { return xScale(d.num2); })
      .attr("height", y0.rangeBand()/2.5 )
      .attr("class", "g-num2")
      .attr("transform", "translate(0,29)");  

    //Binds data to labels
    var labelGroup = svg.selectAll("g-num")
      .data(data)
      .enter()
      .append("g")
      .attr("class", "g-label-group")
      .attr("transform", function(d) {
        return "translate(0," + y0(d.Value) + ")";
      });

    //Appends first bar labels   
    var barLabels = labelGroup.append("text") 
      .text(function(d) {return  d.num;})
      .attr("x", function(d) { return xScale(d.num) - 20; })
      .attr("y", y0.rangeBand()/2.65 )
      .attr("class", "g-labels");    

    //Appends second bar labels   
    var barLabels2 = labelGroup.append("text") 
      .text(function(d) {return  d.num2;})
      .attr("x", function(d) { return xScale(d.num2) - 20; })
      .attr("y", y0.rangeBand()/1.25 )
      .attr("class", "g-labels");      

    //Appends chart source
    d3.select(".g-source-bold")
      .text("SOURCE: ")
      .attr("class", "g-source-bold");

    d3.select(".g-source-reg")
      .text("Chart source info goes here")
      .attr("class", "g-source-reg");  


    //RESPONSIVENESS
    d3.select(window).on("resize", resized);

    function resized() {

      //new margin
      var newMargin = {top: 10, right: 80, bottom: 20, left: 50};

      //Get the width of the window
      var w = d3.select(".g-chart").node().clientWidth;
      console.log("resized", w);

      //Change the width of the svg
      d3.select("svg")
        .attr("width", w);

      //Change the xScale
      xScale
        .range([0, w - newMargin.right]);

      //Update the bars
      bars
        .attr("width", function(d) { return xScale(d.num); });

      //Update the second bars
      bars2
        .attr("width", function(d) { return xScale(d.num2); });  

      //Updates bar labels
      barLabels
        .attr("x", function(d) { return xScale(d.num) - 20; })
        .attr("y", y0.rangeBand()/2.65 )

      //Updates second bar labels
      barLabels2
        .attr("x", function(d) { return xScale(d.num2) - 20; })
        .attr("y", y0.rangeBand()/1.25 )  

      //Updates xAxis
      xAxisGroup
        .call(xAxis);   

      //Updates ticks
      xAxis
        .scale(xScale)
        .ticks(numTicks(w));

    };

  //}

  //Determines number of ticks base on width
  function numTicks(widther) {
    if (widther <= 400) {
      return 4
      console.log("return 4")
    }
    else {
      return 10
      console.log("return 5")
    }
  }
}
  
/* ----- !Functions ----- */ 

/* ----- Main ----- */

var data = createDict(dataRows);

//Calculate unique Values 
var uniqueValues = uniqueValues(dataRows,1);
 
createChart(data);

/* ----- !Main ----- */
/*css to go here*/
  @import url(https://fonts.googleapis.com/css?family=Karla);
  body {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
  }

  .g-hed {
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size:22px; 
    margin: 3px 0;
  }

  .g-source-bold {
    text-align: left;
    font-size:10px;
    font-weight: bold; 
  }

  .g-source {
    margin: 10px 0;
  }

  .g-source-bold {
    text-align: left;
    font-size:10px; 
  }

  .g-intro {
    font-size: 16px;
    margin: 0px 0px 10px 0px;
  }

  .g-num {
    fill:#124;
  }

   .g-num2 {
     fill:#ccc;
  }

  .g-labels {
    fill: white;
    font-weight: bold;
    font-size: 13px;
  }

  .axis line {
    fill: none;
    stroke: #ccc;
    stroke-dasharray: 2px 3px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }

  .axis text {
    font-size: 13px;
    pointer-events: none;
    fill: #7e7e7e;
  }

  .domain {
    display: none;
  }

  .y.axis text {
    text-anchor: end !important;
    font-size:14px;
    fill: #000000;
  }

  .y.axis line {
    display: none;
  }

  .g-baseline line {
    stroke:#000;
    stroke-width: 1px;
    stroke-dasharray:none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>


<body>
  <h5 class="g-hed"></h5>
  <p class="g-intro"></p>
  <div class="g-chart"></div>
    <div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span></div>
  </div>
</body>