Question

如果值小于或等于百分比，我希望将值与最高值进行比较，它应该只显示百分比，并且只要条形高度就可以。

这就是我所拥有的

var maxValue = d3.max(data, function(d) { return d.yColumn; }); var data [20, 1000, 3000, 400]

var bars = g.selectAll("rect").data(data);
bars.attr("height", function(d){if (d.amount/d.maxvalue <= "12%") { return "12%" };});

我知道这是不正确的语法，但我认为我有正确的想法。

由于

Answer 1

（在任何事情之前：不要这样做。无论你有什么设计理由，都不要改变这样的条形图中条形的大小 - 宽度或高度。这是说谎数据。如果你必须这样做以显示小值，请向读者清楚地说明这一变化）

这是您想要的角色：

.attr("height", function(d){
    if (d.amount/d.maxvalue <= 0.12) { 
        return d.maxvalue*0.12;
    } else {
        return d.amount;
    }
});

这是一个演示片段。在这个片段中，酒吧＆＃39; width由数据设置，但如果条形小于最大值的12％（在这种情况下，条形对应于数据点2），则其宽度将转换为最大值的12％：< / p>

＆＃13;

var data = [60, 80, 150, 310, 2, 230, 260, 320];
  
var divs = d3.select("body").selectAll("div")
  .data(data).enter().append("div");
	
divs.style("width", function(d) { 
  if(d/(d3.max(data)) <= .12){return (d3.max(data))*.12 + "px";
  }else{return d + "px";}})
.attr("class", "divchart")
.text(function(d) { return d; });

＆＃13;

.divchart {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

您可以很容易地看到2比它应该更大。

Answer 2

var bars = g.selectAll("rect").data(data);
bars.attr("height", function(d){if (d.amount/d.maxvalue <= "12%") { return "12%" };});

您是否也可以发布与每个栏相关的数据？什么是 d.maxvalue 。看看你的代码，似乎每个条形在其数据中都有一个名为 maxvalue 的属性，你如何计算 maxvalue ？

在下面的代码片段中，我以与您相同的方式使用数据数组。然后，我将单个高度与数组中的最大高度进行比较，如果它是最大值的12％，我将该条的高度设置为最大值的12％，否则条形将包含在数组中的相关高度

var data = [20, 50, 400, 100]

var maxValue = d3.max(data, function(d) { 

return d; 
});

var svg = d3.select("svg");
var g = svg.append("g")

var bars = g.selectAll("rect")
.data(data)
.enter()
.append("rect");

bars.attr("height", function(d){
	if (d/maxValue <= 0.12) 
  	 return d*0.12 ;
  else
  		return d
    }
)
.attr("x",function(d, i){return i*(10 + 10)})
.attr("width",10)
.attr("class","bar")

svg{
  width: 100%;
  height: 500px
}

rect{
  fill: #27ae60
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

d3条形高度的默认条件百分比语句

2 个答案: