Question

在Angular 2应用程序中使用D3 JS创建堆积条形图时出错，

这是代码，

 //data
    var data = [
        { month: 'Jan', A: 20, B: 5, C: 10 },
        { month: 'Feb', A: 30, B: 10, C: 20 }
    ];


    var xData = ["A", "B", "C"];

    var margin = { top: 20, right: 50, bottom: 30, left: 0 },
        width = 350 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scaleBand()
        .range([0, width])
        .padding(0.35);

    var y = d3.scaleLinear()
        .range([height, 0]);

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var xAxis = d3.axisBottom(x);

    var svg = d3.select("#chart").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 + ")");


    var dataIntermediate = xData.map(function (c) {
        return data.map(function (d) {
            return { x: d.month, y: d[c] };
        });
    });

    var dataStackLayout = d3.stack().keys([dataIntermediate]);

    x.domain(dataStackLayout[0].map(function (d) {
        return d.x;
    }));

    y.domain([0,
        d3.max(dataStackLayout[dataStackLayout.length - 1],
            function (d) { return d.y0 + d.y; })
    ])
        .nice();

    var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            return color(i);
        });

    layer.selectAll("rect")
        .data(function (d) {
            return d;
        })
        .enter().append("rect")
        .attr("x", function (d) {
            return x(d.x);
        })
        .attr("y", function (d) {
            return y(d.y + d.y0);
        })
        .attr("height", function (d) {
            return y(d.y0) - y(d.y + d.y0);
        })
        .attr("width", x.range());

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

错误是，

（51,41）：错误TS7017：对象类型的索引签名隐含地具有＆＃39; any＆＃39;类型。

@下线， return {x：d.month，y：d [c]};

（76,19）：错误TS2345：类型的参数＆＃39;（this：BaseType，d：{}）=＆gt; {}＆＃39;不能分配给＆＃39; ValueFn＆＃39;类型的参数。输入＆＃39; {}＆＃39;不能分配给＆＃39; {} []＆＃39;。物业＆＃39;找到＆＃39;类型＆＃39; {}＆＃39;。

@下线， var dataStackLayout = d3.stack（）。keys（[dataIntermediate]）;

Answer 1

我使用相同的例子来实现angular2中的堆叠条形图。我认为你的问题是 var dataStackLayout = d3.stack().keys([dataIntermediate]); dataStackedLayout应为array而不是function。

你能解决这个问题吗？

使用d3（V4）堆积条形图获得错误

1 个答案: