d3js折线图错误 - 绘制奇怪的区域

Question

我找不到有类似问题的人,没有线索解决我在阅读文档和其他问题时遇到的问题,所以我希望有人可以帮助我.

这是我的代码(从文档示例中复制)

var margin = {top: 20, right: 20, bottom: 30, left: 150},
width = document.getElementById("aapp_content_charts").clientWidth - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
.range([0, width]);

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

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

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

var line = d3.svg.line()
.x(function(d) { return x(d3.time.year(parseDate(d[0]))); })
.y(function(d) { return y(d[1]); });

var svg = d3.select("#aapp_content_charts").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 + ")");


x.domain(d3.extent(list_indicators_3years_absolute['Gastos en activos financieros'] , function(d) { return parseDate(d[0]);}));
y.domain(d3.extent(list_indicators_3years_absolute['Gastos en activos financieros'] , function(d) { return d[1];}));

svg.append("g")
  .attr("class", "xaxis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "yaxis")
  .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("(€)");

svg.append("path")
  .datum(list_indicators_3years_absolute['Gastos en activos financieros'])
  .attr("class", "line")
  .attr("d", line);

现在,你想知道我的变量'list_indicators_3years_absolute ['Gastos en activos financieros']'如何看起来像:

• 从console.log:

[数组2,数组2,数组2 ] 0:数组2 0:"2010"1:0长度:2个 原型:数组[0] 1:数组2 0:"2011"1:29999996.8长度:2个 原型:数组[ 0] 2:数组2 0:"2012"1:79204931.01长度:2个 原型:数组[0]长度:3个 原型:数组[0]

• 变量的更直观的例子:

是的,三年(x轴)只有3分:2010年,2011年,2012年

在这里错误"线"图表如何:

我认为错误在我的变量结构中,但我没有得到任何警告,或者找出问题的线索.实际上,两个轴都设置和标记正确,并且三个点也是如此.奇怪的是,这条线似乎是从最后一点到第一点关闭,并填满了.

:-mmmmm

提前致谢!

Answer 1

您似乎错过了<style>该示例中的部分.该fill: none是什么告诉行没有从上次点接近第一种:

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

你告诉它使用这个类:

.attr("class", "line")

但如果引用的CSS或内联样式中不存在"line",您将获得默认的填充行为.

另请参见:具有奇数顶点的D3.js树,未显示边