绘制线图与正面和＆amp;负值

Question

我想画一个 Dovish＆amp; Hawkish 折线图。

示例：

然而，它引发了错误。

我从一个条形图中取了一个例子，用正值和负值绘制条形图。然后我使用了仅与xScale/yScale相关的代码和xAxis/yAxis的行。

here可以找到

JSFiddle 。

Answer 1

这里的问题是您正在使用x轴的序数比例：

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))

哪个域名：

[0, 1, 2, 3, 4, 5, 6, 7]

但是，您将数据传递给行生成器：

var line = d3.svg.line()
    .x(function(d) { return x(d);})
    //datum here -------------^

而不是那样，传递数据的索引：

var line = d3.svg.line()
    .x(function(d, i) { return x(i);})
    //index here ----------------^

这是您更新的代码：

＆＃13;

＆＃13;

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeRoundBands([0, width], .2);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
  .x(function(d, i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  });


var dataSum = d3.sum(data, function(d) {
  return d;
});


svg.append("g")
  .attr("class", "x axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("y1", y(0))
  .attr("y2", y(0))
  .attr("x1", 0)
  .attr("x2", width);

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);

＆＃13;

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.2;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

PS：你不需要在图表中间那条笨拙的线条。您可以创建一个合适的轴：

＆＃13;

＆＃13;

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeRoundBands([0, width], .2);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
  .x(function(d, i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  });

var dataSum = d3.sum(data, function(d) {
  return d;
});

svg.append("g")
  .attr("class", "x axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(xAxis)

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);

＆＃13;

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: blue;
  stroke-width: 2px;
}

.tick text {
  font-size: 12px;
}

.tick line {
  opacity: 0.2;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;