Question

我正在尝试从here获取分组的条形图。一切正常。但是我在Visual Studio代码编辑器中出现以下行的错误标记

界面

export interface StackedBarChartData{
    name: String,
    value:Number
}

代码

 const groupKey = "State";
 const keys = data.columns.slice(1);

 const y = d3.scaleLinear()
        .domain([0, d3.max(data, (d:StackedBarChartData) => d3.max(keys, (key:String) => d[key]))]).nice() // showing red underline
      .rangeRound([this.height - this.margin.bottom, this.margin.top])

错误

Type 'string' is not assignable to type 'number | { valueOf(): number; }'.ts(2322)

代码

 .attr("fill", (d) => color(d['key']));

在

  svg.append("g")
      .selectAll("g")
      .data(data)
      .join("g")
      .attr("transform", d => `translate(${x0(d[groupKey])},0)`)
      .selectAll("rect")
      .data(d => keys.map(key => ({ key, value: d[key] })))
      .join("rect")
      .attr("x", d => x1(d['key']))
      .attr("y", d => y(d['value']))
      .attr("width", x1.bandwidth())
      .attr("height", d => y(0) - y(d['value']))
      .attr("fill", (d) => color(d['key'])); // showing red underline

错误

Type '{}' is not assignable to type 'string | number | boolean'.
  Type '{}' is not assignable to type 'true'.ts(2322)
index.d.ts(81, 58): The expected type comes from the return type of this signature.

如何在Visual Studio代码编辑器中清除该错误（红色下划线）。

package.json

"d3": "^5.9.2",
"@angular/core": "~7.2.0",

传入数据

{
      "State": "CA",
      "Under 5 Years": 2704659,
      "5 to 13 Years": 4499890,
      "14 to 17 Years": 2159981,
      "18 to 24 Years": 3853788,
      "25 to 44 Years": 10604510,
      "45 to 64 Years": 8819342,
      "65 Years and Over": 4114496
    }

Answer 1

清除错误。下面是我的代码更改

const groupKey = "State";
const keys = data.columns.slice(1);

const legend = svg => {
  const g = svg
    .attr("transform", `translate(${this.width},0)`)
    .attr("text-anchor", "end")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .selectAll("g")
    .data(color.domain().slice().reverse())
    .join("g")
    .attr("transform", (d, i) => `translate(0,${i * 20})`);

  g.append("rect")
    .attr("x", -19)
    .attr("width", 19)
    .attr("height", 19)
    .attr("fill", color);

  g.append("text")
    .attr("x", -24)
    .attr("y", 9.5)
    .attr("dy", "0.35em")
    .text(d => d);
}

const x0 = d3.scaleBand()
  .domain(data.map(d => d[groupKey]))
  .rangeRound([this.margin.left, this.width - this.margin.right])
  .paddingInner(0.1)

const x1 = d3.scaleBand()
  .domain(keys)
  .rangeRound([0, x0.bandwidth()])
  .padding(0.05)

const max = (d) => {
  let maxV = d3.max(keys, (key:any) => {
    return d[key]
  });
  return maxV
}

const domainMax:any =  d3.max(data, max);

const y = d3.scaleLinear()
  .domain([0, domainMax]).nice()
  .rangeRound([this.height - this.margin.bottom, this.margin.top])

const color: any = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"])


const xAxis = g => g
  .attr("transform", `translate(0,${this.height - this.margin.bottom})`)
  .call(d3.axisBottom(x0).tickSizeOuter(0))
  .call(g => g.select(".domain").remove())


const yAxis = g => g
  .attr("transform", `translate(${this.margin.left},0)`)
  .call(d3.axisLeft(y).ticks(null, "s"))
  .call(g => g.select(".domain").remove())
  .call(g => g.select(".tick:last-of-type text").clone()
    .attr("x", 3)
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text(data.y))


const svg = d3.select(this.svg.nativeElement)
  .attr('width', this.width)
  .attr('height', this.height)

svg.append("g")
  .selectAll("g")
  .data(data)
  .join("g")
  .attr("transform", d => `translate(${x0(d[groupKey])},0)`)
  .selectAll("rect")
  .data(d => keys.map(key => ({ key, value: d[key] })))
  .join("rect")
  .attr("x", d => x1(d['key']))
  .attr("y", d => y(d['value']))
  .attr("width", x1.bandwidth())
  .attr("height", d => y(0) - y(d['value']))
  .attr("fill", (d) => color(d['key']));

svg.append("g")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

svg.append("g")
  .call(legend);

Visual Studio代码编辑器中d3 js的Typescript接口错误

1 个答案: