получать ошибки с d3 (V4) Stacked Bar Chart

Получения ошибки при создании столбчатой диаграммы с помощью D3 JS в угловом 2 приложении,получать ошибки с d3 (V4) Stacked Bar Chart

здесь код,

//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: подпись индекса типа объекта неявно имеет тип «любой».

@ ниже строки, return {x: d.month, y: d [c]};

(76,19): ошибка TS2345: аргумент типа '(this: BaseType, d: {}) => {}' не присваивается параметру типа 'ValueFn ». Тип '{}' не присваивается типу '{} []'. Свойство 'find' отсутствует в типе '{}'.

@ ниже строки, var dataStackLayout = d3.stack(). Keys ([dataIntermediate]);

источник

2016-12-14 shazia perween

Здравствуйте. Я пробовал переработать ваш код, но я также переработал официальный пример Stacked Bar Chart, сделанный Майком. Проверьте эти файлы github: https://github.com/bluePlayer/practices/tree/master/D3js%20Exercises/StackedBarChart https://github.com/bluePlayer/practices/tree/master/D3js%20Exercises/StackedBarChartError и http: //bl.ocks.org/mbostock/3886208 – Vlad

Я также изучаю D3js, поэтому мне трудно понять, как работает стек D3js. Но я вижу одну ошибку в вашем коде, а именно: d3.stack() создает новую структуру стека d3, и вы не можете использовать ее в качестве данных впоследствии. Но вы можете делать var series = d3.stack(). Keys (["A", "B", "C"]); – Vlad

Также обратитесь к ссылке API для стека: https://github.com/d3/d3-shape/blob/master/README.md#stack – Vlad

im, используя тот же пример, чтобы реализовать сложный барьер в угловом2. Я думаю, что ваша проблема var dataStackLayout = d3.stack().keys([dataIntermediate]); dataStackedLayout должно быть array вместо function.

Вы еще не решили эту проблему?

источник

2017-04-11 17:45:13

получать ошибки с d3 (V4) Stacked Bar Chart

ответ

Смежные вопросы