Question

我创建了一个堆叠条形图，工作正常，但我想过滤掉长度非常小的条形图，以便图表看起来不错。这是我的代码： -

<!DOCTYPE html>
<style>

.axis .domain {

}

</style>
<svg width="3000" height="700"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>





var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 200, left: 60},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, 700])
    .paddingInner(0.55)
    .align(0.5);

var y = d3.scaleLinear()
    .rangeRound([height,0]);

var z = d3.scaleOrdinal()
          .range(["pink","purple"]);
    //.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.csv("pivot2.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i)
  t += d[columns[i]] = +d[columns[i]];

  d.total = t;

  return d;
}, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1);

  data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { if(d.total>2000){return d.Name;} }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) {return z(d.key); })
    .selectAll("rect")
   .data(function(d) { return d;})
    .enter().append("rect")

      .attr("x", function(d) { return x(d.data.Name); })
      .attr("y", function(d) { return y(d[1]) ; })
     .attr("height",0)
      .transition()
      .duration(50)
       .delay(function (d, i) { return i*100; }) 
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width",20)
      //.attr("width", x.bandwidth())


  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(1))
      .selectAll("text")    
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");
      //.call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks().pop()) + 0.2)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      //.text("Duration");

  var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
  .attr("x",1500)
      //.attr("x", width - 20)
      .attr("width", 19)
      .attr("height",0)
      .transition()
      .duration(200)
       .delay(function (d, i) { return i*50; }) 
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
  .attr("x",1490)
  .attr("font-size","20px")
      //.attr("x", width - 30)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });



});
svg.append("text")  
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 200) + ")")
      .style("text-anchor", "middle")
      .style("font-size","28px")
      .style("fill","green")
      .text("Customer Name");


      svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y",-5)
      .attr("x",-200)
      //.attr("y", 0 - margin.left)
      //.attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .style("fill","green")
      .style("font-size","28px")
      .text("Machine Duration By Mode"); 


</script>

如您所见，我已应用“IF”条件

data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { if(d.total>2000){return d.Name;} }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);

但问题是所有剩余的矩形都附加在“蝗虫谷中心学区”上方的左下角，正如您在我提供的屏幕截图中看到的那样。请帮我删除这些额外的矩形。Screenshot for extra rectangles in the stacked bar chart

Answer 1

这里的地图功能：

  data.map(function(d) { if(d.total>2000){return d.Name;} })

实际上不会更改data数组，而是返回一个新数组，用于仅初始化x.domain。

然后使用未更改的data创建矩形：

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) {return z(d.key); })
    .selectAll("rect")
   .data(function(d) { return d;})
    .enter().append("rect")

它创建了带有空x坐标的冗余矩形。要解决此问题，您需要先过滤数据：

  data = data.filter(function(d) {
    if (d.total > 2000) {
       return true
    }
  })

然后用它来设置x.domain（这里没有任何条件）：

  x.domain(data.map(function(d) { return d.Name }))

其余代码保持不变。

从d3js中的堆积条形图中筛选出某些值

1 个答案: