d3バーの高さのデフォルトの条件付きパーセンテージ文

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

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

あなたはまた、各バーに関連するデータを投稿してもらえますか？ d.maxvalueとは何ですか？あなたのコードを見ると、各バーはそのデータにという属性があります。maxvalue、どのように計算しますかmaxval？

次のスニペットでは、データ配列を同じ方法で使用しています。次に、単一の高さを配列の最大高さと比較し、maxの12％であれば、そのバーの高さをmaxの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){ 
 
\t if (d/maxValue <= 0.12) 
 
    \t return d*0.12 ; 
 
    else 
 
    \t \t 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>

Answer 2

（：それをしないあなたが持っているものは何でも、設計上の理由から、サイズ変更しない - などの棒グラフの棒の - 幅または高さを。 。これは、このデータに横たわっているあなたは小さな値を示すためにこれをしなければならない場合は、読者にその変更を明確にする）

これは、あなたが望む役割です：。

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

ここにデモスニペットがあります。このスニペットでは、バーの幅はデータによって設定されますが、バーが最大値の12％（この場合、データポイントに対応するバー2）未満の場合、その幅は最大値の12％に変換されます値：

var data = [60, 80, 150, 310, 2, 230, 260, 320]; 
 
    
 
var divs = d3.select("body").selectAll("div") 
 
    .data(data).enter().append("div"); 
 
\t 
 
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; });

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

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

あなたは簡単2はそれがあるべきよりも道大きいことがわかります。