Question

所以我找到了关于这个错误的六个帖子，但似乎没有解决我的问题。

来自firebase的数据：

<h2>Fun with positions, widths, and heights</h2>

<div class="flexbox">
  <div class="floatRight">Right column</div>

  <div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
  </div>
</div>

然后数据看起来像

data = [{percent:24,year:1790},....]

var parseDate = d3.time.format("%Y").parse; 
// so I want to convert the year to a 'date' for d3 time scale
data.forEach(function(d) {
  d.year = parseDate(d.year.toString());
  d.percent = +d.percent;
});

我的x比例

console.log(data);
[{percent:24,year:Fri Jan 01 1790 00:00:00 GMT-0500 (EST)}...]

我的x域名

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

我的行

x.domain(d3.extent(data, function(d){return d.year; }));

然后我的图表（有一个基础图表，这是扩展）

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

添加时有例外...

this.chart.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

更新

所以这里是使用示例数据的工作代码，代码或多或少是使用csv而不是tsv从d3示例站点复制粘贴

这很好用

Error: <path> attribute d: Expected number,

这不起作用 在这里使用相同的数据源是我的'基本图表'

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

var formatDate = d3.time.format("%Y");

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");

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

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

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 + ")");

d3.csv("./data/debt-public-percent-gdp.csv", type, function(error, data) {
  if (error) throw error;
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

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

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

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.date = formatDate.parse(d.date);
  d.close = +d.close;
  return d;
}

扩展基本图表的图表

export class BaseChart{
   constructor(data,elem,config = {}){
      var d3 = require('d3');
      this.data = data;
      this.svg = d3.select('#'+elem).append('svg');
      this.margin = {
         left: 30,
         top: 30,
         right: 30,
         bottom: 30,
      };

      let width = config.width ? config.width : 600;
      let height = config.height ? config.height : 300;
      this.svg.attr('height', height);
      this.svg.attr('width', width);

      this.width = width - this.margin.left - this.margin.right;
      this.height = height - this.margin.top - this.margin.bottom;
      this.chart = this.svg.append('g')
         .attr('width', this.width)
         .attr('height', this.height)
         .attr('transform', `translate(${this.margin.left},${this.margin.top})`);

   }
}

调用图表的代码

export class FedDebtPercentGDP extends BaseChart{
  constructor(data, elem, config){
    super(data, elem, config);

         var x = d3.time.scale().range([0, this.width]);
var y = d3.scale.linear().range([this.height, 0]);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));

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

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

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

  this.chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + this.height + ")")
      .call(xAxis);
  //
  this.chart.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  this.chart.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

  }
}

数据

d3.csv('./data/debt-public-percent-gdp.csv', type, function(error, data) {
   new FedDebtPercentGDP(data, "debt-to-gdp", {width: '100%'});
});

Answer 1

您提供的代码存在很多问题。我想你没有粘贴它。您粘贴的摘录肯定没有定义this.chart，因此无法重建您的错误消息。

话虽如此，仍有可能确定主要问题：

错误消息说明了一切：因为您已经解析了d.year并将其转换为字符串，但路径需要一个数字作为参数存在类型不匹配＆＃39; -kind of代码中的错误。

您可以在自己提供的控制台日志中查看数据的外观。 year变成了一个字符串。

我建议保留d.year，如果您确实需要，可以创建一个名为date的新属性，如果您需要该格式的日期。因此，如果需要显示日期，则可以使用该日期，而year可用于原始格式的路径计算。

d3错误：<path>属性d：预期的数字日期

1 个答案: