D3 库 Y 轴未标记

Question

目前，当我渲染图表时，我的 X 轴用月份刻度正确标记，我不明白为什么我的 Y 轴不能显示比例。

props.data 返回格式如下的对象数组。

ratings = [
    {
      rating: 1400,
      date: '2014-08-07',
    },
    {
      rating: 1520,
      date: '2014-08-15',
    },
    {
      rating: 1602,
      date: '2014-08-21',
    }
  ];

这是我的 createGraph 函数的代码

import * as d3 from 'd3';

function createGraph(dom, props) {
   // Set default attributes
   const data = props.data;
   const margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50,
  };
  const width = 1200 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

  // Parse Date
  const parseDate = d3.timeParse('%Y-%m-%d');

  // Set Ranges
  const x = d3.scaleTime().rangeRound([0, width]);
  const y = d3.scaleLinear().rangeRound([height, 0]);
  // Define Axes
  const xAxis = d3.axisBottom(x).ticks(4);
  const yAxis = d3.axisLeft(y).ticks(5);

  // Define line
  const valueline = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.rating); });

  // 'add SVG'
  const svg = d3.select(dom)
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

  svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top +     ')');
  data.forEach(function(d) {
    if (typeof d.date === 'string') {
      d.date = parseDate(d.date);
    }
  });
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([
    d3.min(data, function(d) { return d.rating; }),
    d3.max(data, function(d) { return d.rating; })
  ]);

  // Add the valueline path
  svg.append('path')
  .datum(data)
  .attr('class', 'line')
  .attr('d', valueline);

  // Add the X Axis
  svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', "translate(0," + height + ")")
  .call(xAxis);

  // Add the Y Axis
  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);
}
export default createGraph;

Answer 1

您只是忘记使用左边距translate：

svg.append("g")
    .attr("class", "y axis")
    .attr('transform', "translate(" + margin.left + ",0)")
    .call(yAxis);

另外，更改x 范围：

const x = d3.scaleTime().rangeRound([margin.left, width]);

这是一个包含您的代码的演示：

var data = [
    {
      rating: 1400,
      date: '2014-08-07',
    },
    {
      rating: 1520,
      date: '2014-08-15',
    },
    {
      rating: 1602,
      date: '2014-08-21',
    }
  ];

   const margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50,
  };
  const width = 1200 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

  // Parse Date
  const parseDate = d3.timeParse('%Y-%m-%d');

  // Set Ranges
  const x = d3.scaleTime().rangeRound([margin.left, width]);
  const y = d3.scaleLinear().rangeRound([height, 0]);
  // Define Axes
  const xAxis = d3.axisBottom(x).ticks(4);
  const yAxis = d3.axisLeft(y).ticks(5);

  // Define line
  const valueline = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.rating); });

  // 'add SVG'
  const svg = d3.select("body")
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

  svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top +     ')');
  data.forEach(function(d) {
    if (typeof d.date === 'string') {
      d.date = parseDate(d.date);
    }
  });
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([
    d3.min(data, function(d) { return d.rating; }),
    d3.max(data, function(d) { return d.rating; })
  ]);

  // Add the valueline path
  svg.append('path')
  .datum(data)
  .attr('class', 'line')
  .attr('d', valueline);

  // Add the X Axis
  svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', "translate(0," + height + ")")
  .call(xAxis);

  // Add the Y Axis
  svg.append("g")
  .attr("class", "y axis")
	.attr('transform', "translate(" + margin.left + ",0)")
  .call(yAxis);

path {
	fill: none;
	stroke: black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>