D3の棒グラフで、y軸の尺度が棒と正しく整列していません

Question

d3の棒グラフでMike's tutorial Let's make a bar graphpart II,をフォローしていました。
私は水平棒グラフで終わる。
問題は、それぞれのバーに合わせたy軸ラベルを設定できないことです。尺度が間違っているか、バーのy位置を設定している可能性があります。
また、グラフバーはベースラインの代わりに上から始まっています。

\t var options = { 
 
\t margin: { 
 
\t  top: 0, 
 
\t  right: 30, 
 
\t  bottom: 0, 
 
\t  left: 50 
 
\t }, 
 
\t width: 560, 
 
\t height: 400, 
 
\t element: 'body', 
 
\t colors: ["#f44336", "#e91e63", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"] 
 
\t }; 
 

 
\t options.mWidth = options.width - options.margin.left - options.margin.right; 
 
\t options.mHeight = options.height - options.margin.top - options.margin.bottom; 
 

 
\t var _colorScale = d3.scale.ordinal() 
 
\t // .domain([minValue,maxValue]) 
 
\t .range(options.colors); 
 
\t var items = Math.round((Math.random() * 10) + 3); 
 
\t var data = []; 
 
\t for (var i = 0; i < items; i++) { 
 
\t data.push({ 
 
\t  label: 'label' + i, 
 
\t  value: Math.random() * 100 
 
\t }); 
 
\t } 
 

 
\t var _barThickness = 20; 
 

 
\t var width = options.mWidth, 
 
\t height = options.mHeight; 
 

 
\t var svg = d3.select(options.element) 
 
\t .append("svg") 
 
\t .attr("width", width).attr("height", height) 
 
\t .attr("viewBox", "0 0 " + options.width + " " + options.height) 
 
\t //.attr("preserveAspectRatio", "xMinYMin meet") 
 
\t .append("g"); 
 

 
\t svg.attr("transform", "translate(" + options.margin.left * 2 + "," + options.margin.top + ")"); 
 

 
\t var maxValue = 0, 
 
\t minValue = 0; 
 
\t for (var i = 0; i < data.length; i++) { 
 
\t maxValue = Math.max(maxValue, data[i].value); 
 
\t minValue = Math.min(minValue, data[i].value); 
 
\t } 
 

 
\t var scales = { 
 
\t x: d3.scale.linear().domain([0, maxValue]).range([0, width/2]), 
 
\t y: d3.scale.ordinal().rangeRoundBands([0, height], .1) 
 
\t } 
 

 
\t scales.y.domain(data.map(function(d) { 
 
\t return d.label; 
 
\t })); 
 

 
\t var bars = svg.append("g") 
 
\t .attr("class", "bar"); 
 

 
\t var xAxis = d3.svg.axis() 
 
\t .scale(scales.x) 
 
\t .orient("bottom") 
 
\t .ticks(5); 
 

 
\t var yAxis = d3.svg.axis() 
 
\t .scale(scales.y) 
 
\t .orient("left"); 
 

 
\t var xaxis = svg.append("g") 
 
\t .attr("class", "x axis") 
 
\t .attr('transform', 'translate(' + 0 + ',' + height + ')') 
 
\t .call(xAxis) 
 
\t .append("text") 
 
\t .attr("x", width/2) 
 
\t .attr("dy", "3em") 
 
\t .style("text-anchor", "middle") 
 
\t .text("Durations in hours"); 
 

 
\t var yaxis = svg.append("g") 
 
\t .attr("class", "y axis") 
 
\t .attr('transform', 'translate(' + 0 + ',' + 0 + ')') 
 
\t .call(yAxis) 
 
\t .append("text") 
 
\t .attr("transform", "rotate(-90)") 
 
\t .attr("y", -options.margin.left) 
 
\t .attr("x", -height/2) 
 
\t .attr("dy", ".71em") 
 
\t .style("text-anchor", "middle") 
 
\t .text("Labels"); 
 

 
\t var bar = bars.selectAll('rect.bar').data(data); 
 
\t var rect = bar.enter() 
 
\t .append('g') 
 
\t .attr('transform', function(d, i) { 
 
\t  return 'translate(0,' + parseInt(i * _barThickness + 2) + ')'; 
 
\t }); 
 

 
\t rect.append('rect') 
 
\t .attr('class', 'bar') 
 
\t .attr('fill', function(d) { 
 
\t  return _colorScale(d.value); 
 
\t }) 
 

 
\t .attr('width', function(d) { 
 
\t  return scales.x(d.value); 
 
\t }) 
 
\t .attr('height', _barThickness - 1) 
 
\t .attr('y', function(d, i) { 
 
\t  return (i * _barThickness); 
 
\t }) 
 
\t rect.append('text') 
 
\t .attr('x', function(d) { 
 
\t  return scales.x(d.value) + 2; 
 
\t }) 
 
\t .attr('y', function(d, i) { 
 
\t  return (i * _barThickness); 
 
\t }) 
 
\t .attr('dy', '0.35em') 
 
\t .text(function(d) { 
 
\t  return Math.round(d.value); 
 
\t });

svg { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
text { 
 
    font-size: 0.8em; 
 
    line-height: 1em; 
 
} 
 
path.slice { 
 
    stroke-width: 2px; 
 
} 
 
polyline { 
 
    opacity: .3; 
 
    stroke: black; 
 
    stroke-width: 2px; 
 
    fill: none; 
 
} 
 
.axis { 
 
    font: 10px sans-serif; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

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

Answer 1

問題1：この代わりの

：

var _barThickness = 20; 

はこれを行います。

var _barThickness = scales.y.rangeBand(); 

読むhere

あなたはこの代わりの厚さ

を調整したい場合：

y: d3.scale.ordinal().rangeRoundBands([0, height], .7) 

問題2：

y: d3.scale.ordinal().rangeRoundBands([0, height], .1) 

は、これを行います変換が正しくありません。

この代わりに：

var rect = bar.enter() 
    .append('g'); 

問題3：バーのYの

誤った計算

var rect = bar.enter() 
    .append('g') 
    .attr('transform', function(d, i) { 
    return 'translate(0,' + parseInt(i * _barThickness + 2) + ')'; 
    }); 

これを行います。

.attr('y', function(d, i) { 
    return (i * _barThickness); 
    }) 

これを行う：

​​

作業コード