D3 TypeScript将元素设置为path元素的属性

问题描述

我无法编译TypeScript代码.

I can not compile the TypeScript code.

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

    graph.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line); // < !!!!!-------

我收到错误；

Argument of type 'Line<[number, number]>' is not assignable to parameter of type 'ValueFn<BaseType, number[], string | number | boolean>'.
  Types of parameters 'data' and 'datum' are incompatible.

我不做什么，因为Line类未实现ValueFn.我也没有看到这种情况的声明.

I do not what to do because the class Line does not implements ValueFn. I also do not see the declaration for such situation.

attr(name: string): string;
attr(name: string, value: null): this;
attr(name: string, value: string | number | boolean): this;

// element, in order, being passed the current datum (d),
attr(name: string, value: ValueFn<GElement, Datum, string | number | boolean | null>): this;

声明文件中有一部分.

推荐答案

这有效.将该属性设置一次带有数据的行生成器.

This works. Set a line generator with data at once to the attribute.

let lineGenerator = d3.line<ILineChartPoint>()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); });
...
let line = g.append("path")
      .attr("d", lineGenerator(this.data));

这篇关于D3 TypeScript将元素设置为path元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！