Question

我在之前的帖子中帮助你在d3中堆积了条形图..但现在我遇到了问题。当我添加另一个X点（就像在照片中消失的用户44）时，它仍然计算最后一个用户的日期。我需要将此变量初始化为0

这是代码：

var margin = {top: 80, right: 90, bottom: 30, left: 90},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
var formatPercent = d3.format(".0%");
//יצירת X
//יאכלס את סוגי הרכב השונים
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
//יצירת ציר y
//יציג בר עבור מחיר הרכב המוצע לדילרים
var y = d3.scale.linear()
.range([height, 0]);


var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

//יצירת ציר הY
//והצמדתו לצד שמאל
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").ticks(4)

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
  return "<strong></strong>" + d.Current_Job + "<br><strong></strong> <span style='color:#00FF66'>" + d.TimeInRole + "</span>";
})




var svg = d3.select("body").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 + ")");

svg.call(tip);
//קליטת הטבלה והגדרת הטווחים על הצירים
d3.csv("Targil2.csv", type, function(error, data) {
  window.dataSet = data;
  x.domain(data.map(function (d) { return d.User_ID; }));
  y.domain([0, d3.max(data, function (d) { return d.TimeInRole * 5; })]);


  var stack = d3.layout.stack()
  .x(function (d) { return d.User_ID }) // tell d3 to use Type as x value
  .y(function (d) { return d.TimeInRole }); // tell d3 to use Sum as y value


  //הוספה של 2 הצירים
  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  svg.append("g")
  .attr("class", "y axis axisLeft")
  .attr("transform", "translate(0,0)")
  .call(yAxis)
  .append("text")
  .attr("y", 6)
  .attr("dy", "-2em")
  .style("text-anchor", "end")
  .style("text-anchor", "end")
  .text("Days");



  var stackSoFar = 0;

  //הוספת בר הנתונים
  svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("x", function (d) { return x(d.User_ID); })
  .attr("width", x.rangeBand())
  .attr("y", function(d){
    d3.select(this)
    .attr("height", function(d2){
      var thisHeight = height - y(d.TimeInRole);
      stackSoFar += thisHeight
      return thisHeight
    });
    return (height - stackSoFar)
  })
  .style("fill", function(d){
    if (d.Current_Job == "Registered Users") { return "#1F77B4"; }
    if (d.Current_Job == "Super Users") { return "#AEC7E8"; }
    else return "#FF7F0E";
  })

  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

});

function type(d) {
  d.TimeInRole = +d.TimeInRole;

  return d;
}

body {
  font: 10px sans-serif;
  margin:auto;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar1 {
  fill: #00FF66;

}

.bar1:hover {
  fill: black ;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<center>    
</center>

我应该在哪里重置'stackSoFar'变量？

这是csv文件的示例：

2864,Vanished user 03,03/09/2010 18:22,Registered Users,460
2865,Vanished user 03,31/05/2009 19:31,Executives,22
2866,Vanished user 03,22/06/2009 18:02,Super Users,358
2867,Vanished user 03,15/06/2010 19:20,Super Users,83
2868,Vanished user 03,06/09/2010 18:09,Registered Users,653
2869,Vanished user 03,20/06/2012 08:02,Registered Users,733
28628,Vanished user 44,06/09/2010 18:09,Registered Users,653
28269,Vanished user 44,20/06/2012 08:02,Super Users,733

Answer 1

我认为你的问题来自于你将高度添加到你绘制的任何矩形的位置，而有两个单独的条：

var stack1SoFar = 0;
var stack2SoFar = 0;

svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("x", function (d) { return x(d.User_ID); })
      .attr("width", x.rangeBand())
      .attr("y", function(d){
        d3.select(this)
          .attr("height", function(d2){
              var thisHeight = height - y(d.TimeInRole);

            if (d.User_ID == Rdsmith4) {
                stack1SoFar += thisHeight;
            } else {
                stack2SoFar += thisHeight;
            }
            return thisHeight
          });
        if (d.User_ID == Rdsmith4) {
            return (height - stack1SoFar);
        } else {
            return (height - stack2SoFar);
        }
      })
      .style("fill", function(d){
          if (d.Current_Job == "Registered Users") { return "#1F77B4"; }
          if (d.Current_Job == "Super Users") { return "#AEC7E8"; }
          else return "#FF7F0E";
      })

如果有两个以上的栏，我认为你应该创建一个对象数组（在一个循环中），如下所示：

[{
    user_id: "Rdsmith4",
    stackSofar: 0,
}, {
    user_id: "Vanished",
    stackSofar: 0,
}]

让我知道它是否有效！ =）

堆积的条形图反转

1 个答案: