D3.js：この2つのステートメントを追加すると棒グラフが変わる理由

Question

こんにちは私はbarChartを持っていて、xv = 0かつy = 0がsvgにあることを知っています。下方に私はステートメントのカップルを追加した場合、それは変わります。

var w = 500; 
 
var h = 100; 
 
var barPadding = 1; 
 

 
var dataset = [5, 4, 6, 7, 8, 10, 2, 3, 4, 5, 6, 25, 34, 54, 64, 32, 11, 32, 42, 5, 10, 15, 20, 25, 30, 35, 40]; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 

 
var rectangles = svg.selectAll("rect") 
 
    .data(dataset) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("x", function(d, i) { 
 
    return i * (w/dataset.length); 
 
    }) 
 
    .attr("y", function(d) { 
 
    return h - d; 
 
    }) 
 
    .attr("width", w/dataset.length - barPadding) 
 
    .attr("height", function(d) { 
 
    return d * 4; 
 
    }) 
 
    .attr("fill", function(d) { 
 
     return "rgb(0, 0, " + (d * 10) + ")"; 
 
    });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

I a）は、なぜ彼らは、y位置決めのためにH-D使用例上の2つの質問、 がありますか？たとえば、svgの高さが100で、データセットの数値が60の場合は、左上のy = 40にバーを配置しないでください。しかし、これをレンダリングするときには当てはまりません。棒はすべての棒で同じyの位置に表示されます

棒が正しく与えられているのはなぜですか？この場合、バーを「底から成長する」とすると、私が数学をすると別のことが予想されます。

Answer 1

この場合、y値が正しい場所で切り取られるのは、svgの高さが100であるためです。しかし、svgを注意深く検査すると、すべての長方形がsvgの底部を越えて延び、オーバーフローがないので表示されません。

h-dは値が60の場合は開始yの位置が正しいので、正しく指定した場合は（100-60）は40になります。しかし、実際の高さはd * 4ではなくdでなければなりません。d * 4がどこから来たのか分かりません。

したがって、値が60の場合、yは40、高さは60になります。これはsvgの最後まで拡張されます。

これが役に立ちます。