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

【问题标题】：d3js line chart error - drawing weird aread3js折线图错误 - 绘制奇怪的区域
【发布时间】：2013-10-23 17:12:07
【问题描述】：

我找不到有类似问题的人，也没有线索可以解决我阅读文档和其他问题的问题，所以我希望有人能在这里帮助我。

这是我的代码（复制自documentation example）

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

提前致谢！

【问题讨论】：

标签： d3.js linechart

【解决方案1】：

您似乎缺少该示例中的<style> 部分。 fill: none 告诉 not 行从最后一个点到第一个点关闭：

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

你告诉它使用这个类：

.attr("class", "line")

但如果引用的 CSS 或内联样式中不存在“line”，您将获得默认填充行为。

另请参阅：D3.js tree with odd number of vertices, edges not shown

【讨论】：

:-OOOOOOOOOOOOOOOOOOOOOOOOOOOO