javascript - d3 图表正在显示，但在轴上显示时值关闭

Question

我有一个“有效”的 d3 图表，但图表上的线条基于 y 轴并不完全正确。我试图在下面包含一个代码片段来显示代码，但它也是可见的 in this fiddle .

我在天平和其他方面都考虑到了边际；我只是不确定出了什么问题。最容易看出错误的月份是四月；它的值(value)是 3,420 美元，但您可以看到它甚至没有达到 y 轴上的 3,000 美元大关的峰值。

$(document).ready(function() {
  var $chart = $('#chart');
  var isInitialized = false;

  var margin = {
    top: 20,
    right: 20,
    bottom: 40,
    left: 40
  };
  var w = $chart.innerWidth() - margin.left - margin.right;
  var h = $chart.innerHeight() - margin.top - margin.bottom;

  var svg = d3.select('#chart')
    .append('svg')
    .classed('chart', true)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

  var path = svg.append('path');

  updateChart({
    "1": 567.5,
    "2": 1076.25,
    "3": 436.5,
    "4": 3420,
    "5": 1412,
    "6": 1485,
    "7": 0,
    "8": 0,
    "9": 0,
    "10": 0,
    "11": 0,
    "12": 0
  });

  function updateChart(data) {
    var keys = _.filter(_.keys(data), function(key) {
      return !key.startsWith('$');
    });
    var months = _.map(keys, function(key) {
      return parseInt(key);
    });
    var sales = _.values(_.pick(data, keys));

    var _data = _.map(sales, function(val, idx) {
      return {
        month: idx + 1,
        sales: val
      }
    });

    console.log('months', months);
    console.log('sales', sales);
    console.log('_data', _data);

    var xTickValues = _data.length === 12 ? ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] : ["1Q", "2Q", "3Q", "4Q"];

    var xScale = d3.scale.linear()
      .domain(d3.extent(months))
      .range([margin.left, w - margin.right]);

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .ticks(_data.length)
      .tickFormat(function(d, i) {
        return xTickValues[i];
      })
      .orient('bottom');

    if (!isInitialized) {
      svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0, ' + (h - (margin.bottom / 2)) + ')')
        .call(xAxis);
    } else {
      svg.select('g.x.axis')
        .transition()
        .duration(1500)
        .ease('sin-in-out')
        .call(xAxis);
    }

    var yScale = d3.scale.linear()
      .domain(d3.extent(sales))
      .range([h - margin.top, margin.bottom]);

    var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient('left');

    if (!isInitialized) {
      svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(' + margin.left + ', 0)')
        .call(yAxis);
    } else {
      svg.select('g.y.axis')
        .transition()
        .duration(1500)
        .ease('sin-in-out')
        .call(yAxis);
    }

    var area = d3.svg.line()
      .interpolate('basis')
      .x(function(d) {
        return xScale(d.month);
      })
      .y(function(d) {
        return yScale(d.sales);
      });

    path.datum(_data)
      .transition()
      .duration(1500)
      .attr('d', area);

    isInitialized = true;
  }
});

html {
  height: 500px;
}
path {
  fill: none;
  fill-opacity: 0.7;
}
#chart {
  height: 400px;
}
#chart>svg {
  width: 100%;
  height: 100%;
  stroke: black;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.axis text {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 13px;
}

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

Answer 1

我认为你面临的问题是你的插值

如果你改变

d3.svg.line()
      .interpolate('basis')

到

d3.svg.line()
        .interpolate('line')

你会看到它会命中你所有的数据点，但不清楚这是否是你想要的。