Question

我正在关注this tutorial，并且遇到了为我的图表显示y轴的问题，我认为这也阻止了我的数据出现。这是我正在绘制的一些虚拟数据的小提琴：

https://jsfiddle.net/katiebroida/1vonf6v8/8/

在检查结果中的元素时，您将在小提琴中看到，除了表示数据的线的路径元素外，x轴还附加到图表div。但是，y轴似乎根本没有附加。

以下是代码本身：

HTML

var stockData = [
  {date: 1,lastPrice: 54},
  {date: 2,lastPrice: 78},
  {date: 3,lastPrice: 32},
  {date: 4,lastPrice: 44},
  {date: 5,lastPrice: 11},
];
  var width = 550;
  var height = 200;
  var margin = {top: 20, right: 20, bottom: 20, left: 50};

  // draw and append the container
  var svg = d3.select('#stockChart').append('svg')
    .attr('height', height)
    .attr('width', width)
    .append('g')
      .attr('transform','translate(' + margin.left + ',' + margin.right + ')');

  var xScale = d3.scale.linear()
    .range([0, width - margin.left - margin.right]);

  var yScale = d3.scale.linear()
    .range([height - margin.top - margin.bottom, 0]);

  var line = d3.svg.line().interpolate("monotone")
    .x(function(d){ return xScale(d.date); })
    .y(function(d){ return yScale(d.lastPrice); });


  function drawLineChart(){

    // obtain absolute min and max
    var yMin = stockData.reduce(function(pv,cv){
      return Math.min(pv, cv.lastPrice);
    },100);

    var yMax = stockData.reduce(function(pv,cv){
      return Math.max(pv,cv.lastPrice);
    },0);

    var xMin = stockData.reduce(function(pv, cv){
      return Math.min(pv, cv.date);
    }, 100);

    var xMax = stockData.reduce(function(pv, cv){
      return Math.max(pv, cv.date);
    }, 0);

    // create domains for axis
    yScale.domain([yMin, yMax]);
    xScale.domain([xMin, xMax]);

    // create axis
    var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
    var yAxis = d3.svg.axis().scale(yScale).orient('left');

    // if no axis exists, create one, otherwise update it
    if (svg.selectAll('.y.axis')[0].length < 1 ){
      svg.append('g')
          .attr('class','y axis')
          .call(yAxis);
    } else {
      svg.selectAll('.y.axis').transition().duration(1500).call(yAxis);
    }

    if (svg.selectAll('.x.axis')[0].length < 1 ){
      svg.append('g')
          .attr('class','x axis')
          .call(xAxis);
    } else {
      svg.selectAll('.x.axis').transition().duration(1500).call(xAxis);
    }

    // remove previously existing lines, if any
    svg.selectAll('.y.axis').remove();

    var lines = svg.selectAll('.line').data(stockData).attr('class', 'line');

    lines.enter().append('path')
      .attr('class', 'line')
      .attr('d', line).style('stroke', 'blue');
  }

  drawLineChart();

的JavaScript

{{1}}

为什么没有将y轴附加到图表中，我有什么遗漏？

Answer 1

这一行：

svg.selectAll('.y.axis').remove();

正在删除轴，请将其注释掉。

更新了小提琴：https://jsfiddle.net/thatoneguy/1vonf6v8/9/

然而虚拟数据并未显示。所以我将你的行创建函数更改为：

  var lines = svg.append("path")
    .datum(stockData)
    .attr("class", "line")
    .attr("d", line);

添加了这条CSS：

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

现在很好。更新了小提琴：https://jsfiddle.net/thatoneguy/1vonf6v8/11/

D3 - y轴未附加到图表

HTML

的JavaScript

1 个答案: