Typescriptを使用してD3と角2を統合しようとしています。すべての入力でエラーは発生しませんが、コード内のすべてのインスタンスでエラーが発生するケースが1つあります。あなたが見ることができるように角型2と型付きV2でD3 V4を使用しているときにタイプするエラー
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
import * as Moment from 'moment';
@Component({
selector: 'app-select-d3',
templateUrl: './select-d3.component.html',
styleUrls: ['./select-d3.component.css']
})
export class SelectD3Component implements OnInit {
constructor() { }
ngOnInit() {
var data = [];
data[0] = [];
data[1] = [];
data[2] = [];
data[3] = [];
data[0][0] = [1, 2, 3];
data[0][1] = [4, 5, 6];
data[1][0] = [7, 8];
data[1][1] = [9, 10, 11, 12];
data[1][2] = [13, 14, 15];
data[2][0] = [16];
data[3][0] = [17, 18];
var width = 1000;
var height = 240;
var barWidth = 100;
var barGap = 10;
var margin = { left: 50, right: 50, top: 0, bottom: 0 };
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var chartGroup = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var firstGroups = chartGroup.selectAll("g")
.data(data)
.enter().append("g")
.attr("class", function (d, i) { return "firstLevelGroup" + i; })
.attr("transform", function (d, i) { return "translate(" + (i * (barWidth + barGap)) + ",0)"; })
//console.log(firstGroups);
var secondGroups = firstGroups.selectAll("g")
.data(function (d) { return d; })
.enter().append("g")
.attr("class", function (d, i, j) { return "secondLevelGroup" + i; })
.attr("transform", function (d, i, j) { return "translate(0," + (height - ((i + 1) * 50)) + ")"; });
//console.log(secondGroups);
secondGroups.append("rect")
.attr("x", function (d, i) { return 0; })
.attr("y", "0")
.attr("width", 100)
.attr("height", 50)
.attr("class", "secondLevelRect");
secondGroups.selectAll("circle")
.data(function (d) { return d; })
.enter().append("circle")
.filter(function (d) { return d > 10; })
.attr("cx", function (d, i) { return ((i * 21) + 10); })
.attr("cy", "25")
.attr("r", "10")
secondGroups.selectAll("text")
.data(function (d) { return d; })
.enter()
.append("text")
.attr("x", function (d, i) { return ((i * 21) + 10); })
.attr("y", "25")
.attr("class", "txt")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.text(function (d, i, nodes) { return d; });
}
}
、私は使用するたび:.DATA(関数(D){リターンdは;})、関数は赤で下線が引かれています。
次のように生成されるエラーは次のとおりです。私は、このソリューションで説明したように、エクスポートD3モジュールのすべてと私のルートsrcフォルダ内の私のグローバルtypings.d.tsを更新しようとしている
[ts] Argument of type '(this: BaseType, d: {}) => {}' is not assignable to parameter of type '(this: BaseType, datum: {}, index: number, groups: BaseType[] | ArrayLike<BaseType>) => {}[]'.
Type '{}' is not assignable to type '{}[]'.
:here
次のように私はtsconfig.jsonを持っている:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
},
"exclude": ["../node_modules","src"]
}
次のように私は私のコンポーネントの設定ファイルを作成しました:
export interface AreaChartConfig {
function: any;
}
既存の入力が互いに競合しているか、それぞれのd3モジュールに適切な定義が存在しないかどうかはわかりません。
私の質問は次のとおりです:もしそれらが存在しなければ、どの@ type/d3モジュールを更新するべきですか?そして私はそれをどのように更新すべきですか?
コンポーネントのインターフェイスが動作しないのはなぜですか?
これらが矛盾している場合、tscコンパイラはどのようなタイプの競合を引き起こしていますか?
私はタイピングの概念を理解していますが、これは正しくタイプされていません。
助けていただけたら幸いです!
;
と積み上げ棒グラフの作品:私がやったことは、このですか? – Aravind
しかし私は試してみることはできません。私はすぐに、ありがとう、リンクを投稿します。 –
私はこのplunkrを作成しました:https://plnkr.co/edit/DkDBBfIWc5LS19cldc3p?p=info –