D3折线图显示正数和负数

Question

所以我正在与D3一起创建线形图。此图在此处jsfiddle可用。 我正在尝试手动绘制线条以表示某些数据点值。我已经尝试在代码的大多数行中添加注释，因此希望您可以继续。

我的问题是我似乎无法很好地绘制负数，如果我这样做了，则图形数据线会错位。所以我的问题是：如何缩放图形以显示正数和负数？在这种情况下，图应该根据我设置的最大/最小值从2 to -2中得出。

当前。我正在像这样缩放我的图

  //
  // Setup y scale
  //
  var y = d3.scale.linear()
    .domain([0, max])
    .range([height, 0]);

  //
  // Setup x scale
  //
  var x = d3.time.scale()
    .domain(d3.extent(data, dateFn))
    .range([0, width]);

在我看来，做.domain([-2,max])就足够了，但这似乎会使情况变得更糟。

此外，我的行似乎与数据行所说的不符。在jsfiddle中，绿线设置为1。但是值为1的数据线不在那条绿线上。

所以，我猜这几乎是一个规模问题。

图形工作时的外观的可视化表示（picasso-esc）。

Answer 1

由于您希望y域为[-2，2]，而不是由数据驱动，因此可以从drawGraph函数中删除很多设置和帮助函数。

绘制图形后，您可以简单地遍历yLines数组，并根据您的yScale在指定的color处为每个具有指定的val的线画一条线。 / p>

更新：编辑：由于将向您提供来自端点的nominal, upperTolerance, lowerTolerance, innerUpperTolerance, innerLowerTolerance的值（并且不需要从客户端的数据计算得出），只需将这些值输入到您的数据中，驱动yScale绘制彩色线条。

下面，我刚刚使用了值1, 1.8, -1.8，但是您会收到与您的数据更有意义相关的值。

// Setup
const yLines = [{
    val: 1,
    color: 'green'
  },
  {
    val: 1.8,
    color: 'yellow'
  },
  {
    val: -1.8,
    color: 'red'
  }
]

const margin = {
  top: 10,
  right: 80,
  bottom: 60,
  left: 20
};

const strokeWidth = 3;
const pointRadius = 4;
const svgWidth = 600;
const svgHeight = 600;
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;
const stroke = '#2990ea'; // blue
const areaFill = 'rgba(41,144,234,0.1)'; // lighter blue
const format = d3.time.format("%b %e %Y");

const valueFn = function(d) {
  return d.value
};
const dateFn = function(d) {
  return format.parse(d.name)
};

// select the div and append svg to it
const graph = d3.select('#chart').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .style('overflow', 'visible');

const transformGroup = graph.append('g')
  .attr('tranform', `translate(${margin.left}, ${margin.right})`)


// Make a group for yLines
const extraLines = transformGroup.append('g')
  .attr('class', 'extra-lines')



// Generate some dummy data
const getData = function() {
  let JSONData = [];
  for (var i = 0; i < 30; i++) {
    JSONData.push({
      "name": moment().add(i, 'days').format('MMM D YYYY'),
      "value": Math.floor(Math.random() * (Math.floor(Math.random() * 20))) - 10
    })
  }
  return JSONData.slice()
}

const drawGraph = function(data) {

  console.log(data)

  // Setup y scale
  const y = d3.scale.linear()
    .domain(d3.extent(data.map((d) => d.value)))
    .range([height, 0]);

  // Setup y axis
  const yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    .tickSize(0, 0, 0)

  // append group & call yAxis
  transformGroup.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(yAxis);

  // Draw extra coloured lines from yLines array
  extraLines.selectAll('.extra-line')
    .data(yLines)
    .enter()
    .append('line')
    .attr('class', 'extra-line')
    .attr('x1', margin.left)
    .attr('x2', svgWidth - margin.right)
    .attr('stroke', d => d.color)
    .attr('y1', d => y(+d.val))
    .attr('y2', d => y(+d.val))
    .attr('stroke-width', strokeWidth)
    .attr('opacity', 0.5)


  // Setup x scale
  const x = d3.time.scale()
    .domain(d3.extent(data, dateFn))
    .range([0, width])

  // function for filling area under chart
  const area = d3.svg.area()
    .x(d => x(format.parse(d.name)))
    .y0(height)
    .y1(d => y(d.value))

  // function for drawing line
  const line = d3.svg.line()
    .x(d => x(format.parse(d.name)))
    .y(d => y(d.value))

  const lineStart = d3.svg.line()
    .x(d => x(format.parse(d.name)))
    .y(d => y(0))

  // make the line
  transformGroup.append('path')
    .attr('stroke', stroke)
    .attr('stroke-width', strokeWidth)
    .attr('fill', 'none')
    .attr('transform', `translate(${margin.left}, ${margin.top})`)
    .attr('d', lineStart(data))
    .attr('d', line(data))

  // fill area under the graph
  transformGroup.append("path")
    .datum(data)
    .attr("class", "area")
    .attr('fill', areaFill)
    .attr('transform', `translate(${margin.left}, ${margin.top})`)
    .attr('d', lineStart(data))
    .attr("d", area)
}

drawGraph(getData())

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

<div id="chart" style="margin: 0 auto;"></div>