在D3條形圖中，y軸序數標度未與條形正確對齊

Question

我正在關注Mike的教程讓我們制作一個條形圖 第二 部分，第三部分為d3中的條形圖。
我最終得到了一個水平條形圖。
問題是我無法將y軸標簽設置為與其各自的條形對齊，也許我對序數比例有點錯誤或設置了條形的y位置。
此外，圖形條從頂部開始而不是基線。

  var options = { margin: { top: 0, right: 30, bottom: 0, left: 50 }, width: 560, height: 400, element: 'body', colors: ["#f44336", "#e91e63", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"] }; options.mWidth = options.width - options.margin.left - options.margin.right; options.mHeight = options.height - options.margin.top - options.margin.bottom; var _colorScale = d3.scale.ordinal() // .domain([minValue,maxValue]) .range(options.colors); var items = Math.round((Math.random() * 10) + 3); var data = []; for (var i = 0; i < items; i++) { data.push({ label: 'label' + i, value: Math.random() * 100 }); } var _barThickness = 20; var width = options.mWidth, height = options.mHeight; var svg = d3.select(options.element) .append("svg") .attr("width", width).attr("height", height) .attr("viewBox", "0 0 " + options.width + " " + options.height) //.attr("preserveAspectRatio", "xMinYMin meet") .append("g"); svg.attr("transform", "translate(" + options.margin.left * 2 + "," + options.margin.top + ")"); var maxValue = 0, minValue = 0; for (var i = 0; i < data.length; i++) { maxValue = Math.max(maxValue, data[i].value); minValue = Math.min(minValue, data[i].value); } var scales = { x: d3.scale.linear().domain([0, maxValue]).range([0, width / 2]), y: d3.scale.ordinal().rangeRoundBands([0, height], .1) } scales.y.domain(data.map(function(d) { return d.label; })); var bars = svg.append("g") .attr("class", "bar"); var xAxis = d3.svg.axis() .scale(scales.x) .orient("bottom") .ticks(5); var yAxis = d3.svg.axis() .scale(scales.y) .orient("left"); var xaxis = svg.append("g") .attr("class", "x axis") .attr('transform', 'translate(' + 0 + ',' + height + ')') .call(xAxis) .append("text") .attr("x", width / 2) .attr("dy", "3em") .style("text-anchor", "middle") .text("Durations in hours"); var yaxis = svg.append("g") .attr("class", "y axis") .attr('transform', 'translate(' + 0 + ',' + 0 + ')') .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -options.margin.left) .attr("x", -height / 2) .attr("dy", ".71em") .style("text-anchor", "middle") .text("Labels"); var bar = bars.selectAll('rect.bar').data(data); var rect = bar.enter() .append('g') .attr('transform', function(d, i) { return 'translate(0,' + parseInt(i * _barThickness + 2) + ')'; }); rect.append('rect') .attr('class', 'bar') .attr('fill', function(d) { return _colorScale(d.value); }) .attr('width', function(d) { return scales.x(d.value); }) .attr('height', _barThickness - 1) .attr('y', function(d, i) { return (i * _barThickness); }) rect.append('text') .attr('x', function(d) { return scales.x(d.value) + 2; }) .attr('y', function(d, i) { return (i * _barThickness); }) .attr('dy', '0.35em') .text(function(d) { return Math.round(d.value); }); 

 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();

在這里閱讀

如果要調節厚度

而不是這個：

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

做這個：

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

問題2：

轉換不正確。

而不是這個：

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

做這個：

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

問題3：

條形圖的y計算不正確。

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

做這個：

  .attr('y', function(d, i) {
    return scales.y(d.label);
  })

在這里工作代碼