При добавлении SVG-графика к узлу происходит его сбой, чего-то не хватает - PullRequest
Новая
       13

При добавлении SVG-графика к узлу происходит его сбой, чего-то не хватает

0 голосов
/ 10 июня 2019

Я пытаюсь визуализировать граф d3fc на узле svg в моем элементе response.js и вернуть все это, но он вылетает, когда я вызываю .datum (my_data) в моем выборе d3.Я думаю, что мне не хватает чего-то очень базового в природе DOM или узлов SVG, в частности

. Это учебное пособие по диаграмме, которое я пытаюсь воссоздать (за исключением данных примера, яя использую свой собственный массив из 600 ('x': value, 'y': value} пары данных):

https://bl.ocks.org/ColinEberhardt/9b8b198a81e749c5ab8b1e06b455db61#askmefi_category_year.tsv

<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<div id='small-multiples'></div>

<style>
  html, body, #small-multiples {
    height: 100%;
    margin: 0;
    }
</style>

<script>
d3.tsv('askmefi_category_year.tsv')
  .row(function(r) {
    return {
        category: r.category,
        n: Number(r.n),
      year: Number(r.year)
    }
  })
  .get(function(data) {
    var nested = d3.nest()
        .key(function(k) { return k.category; })
        .entries(data);

    // pick on of the data series
    var dataSeries = nested[7].values;

    var yExtent = fc.extentLinear()
      .accessors([function(d) { return d.n; }])
      .pad([0, 0.2])
        .include([0]);

    var xExtent = fc.extentLinear()
        .accessors([function(d) { return d.year; }]);

    var line = fc.seriesSvgLine()
      .crossValue(function(d) { return d.year; })
      .mainValue(function(d) { return d.n; });

    var chart = fc.chartSvgCartesian(
        d3.scaleLinear(),
        d3.scaleLinear())
      .yDomain(yExtent(data))
        .xDomain(xExtent(data))
      .yOrient('left')
        .plotArea(line);

    // render
    d3.select('#small-multiples')
      .datum(dataSeries)
      .call(chart);
    });

А вот мой (почтиидентично) функция реагирования. 

 plot_d3fc_x(data){

        var dataSeries = data
        console.log('entered d3fc func, data:', dataSeries)

        var yExtent = fc.extentLinear()
            .accessors([function(d){
                // console.log(d.y)
                return d.y;}])
            .pad([0,0.2])
            .include([0]);

        var xExtent = fc.extentLinear()
            .accessors([function(d){
                // console.log(d.x)
                return d.x;}])

        var line = fc.seriesSvgLine()
            .crossValue(function(d){return d.x;})
            .mainValue(function(d){return d.y;})

        var chartitself = fc.chartSvgCartesian(
            d3.scaleLinear(),
            d3.scaleLinear())
            .yDomain(yExtent(data))
            .xDomain(xExtent(data))
            .yOrient('left')
            .plotArea(line);

    //CRASHES HERE
            d3.select('#svg_group')
                .datum(dataSeries)
                .call(chartitself);    


    }

Мой рендер в элементеactjs имеет буквально только одну вещь, которую можно выбрать для указанной выше функции: 

    render() {
            return (
            <svg id="svg_group"/>
            )          
        }

Я был бы признателен за тонну, если бы кто-нибудь мог объяснитьошибка, которую я получаю при вызове функции: 

"TypeError: nodes[i].requestRedraw is not a function
SVGElement.<anonymous>
node_modules/d3fc/build/d3fc.js:7053
  7050 |     transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(yAxisStore(yAxisComponent));
  7051 |   });
  7052 |   container.each(function (d, i, nodes) {
> 7053 |     return nodes[i].requestRedraw();
       | ^  7054 |   });
  7055 |   decorate(container, data, index);
  7056 | });
View compiled
Selection.each
node_modules/d3-selection/src/selection/each.js:4
  1 | export default function (callback) {
  2 |   for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
  3 |     for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
> 4 |       if (node = group[i]) callback.call(node, node.__data__, i, group);
  5 |     }
  6 |   }
  7 | 
View compiled
SVGGElement.<anonymous>
node_modules/d3fc/build/d3fc.js:7052
  7049 |   yAxisComponent.decorate(yDecorate);
  7050 |   transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(yAxisStore(yAxisComponent));
  7051 | });
> 7052 | container.each(function (d, i, nodes) {
       | ^  7053 |   return nodes[i].requestRedraw();
  7054 | });
  7055 | decorate(container, data, index);
View compiled
Selection.each
node_modules/d3-selection/src/selection/each.js:4
  1 | export default function (callback) {
  2 |   for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
  3 |     for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
> 4 |       if (node = group[i]) callback.call(node, node.__data__, i, group);
  5 |     }
  6 |   }
  7 | 
View compiled
cartesian
node_modules/d3fc/build/d3fc.js:6993
  6990 | 
  6991 | var cartesian = function cartesian(selection$$1) {
  6992 |   var transitionPropagator = propagateTransition(selection$$1);
> 6993 |   selection$$1.each(function (data, index, group) {
       | ^  6994 |     var container = containerDataJoin(d3Selection.select(group[index]), [data]);
  6995 |     container.enter().attr('auto-resize', '');
  6996 |     chartLabelDataJoin(container, [xOrient(data)]).attr('class', function (d) {
View compiled
Selection.call
node_modules/d3-selection/src/selection/call.js:4
  1 | export default function () {
  2 |   var callback = arguments[0];
  3 |   arguments[0] = this;
> 4 |   callback.apply(null, arguments);
  5 |   return this;
  6 | }
View compiled
cartesianBase
node_modules/d3fc/build/d3fc.js:7236
  7233 |     container.select('.y-label-container>.y-label').text(yLabel);
  7234 |     decorate(container, data, index);
  7235 |   });
> 7236 |   selection$$1.call(cartesian);
       | ^  7237 | };
  7238 | 
  7239 | rebindAll(cartesianBase, cartesian, include(/^x/, /^y/, 'chartLabel'));
View compiled
Selection.call
node_modules/d3-selection/src/selection/call.js:4
  1 | export default function () {
  2 |   var callback = arguments[0];
  3 |   arguments[0] = this;
> 4 |   callback.apply(null, arguments);
  5 |   return this;
  6 | }
View compiled
LinePlot.plot_d3fc_x
src/d3charts/LinePlot.js:193
  190 |                .attr("height", svgHeight);
  191 | 
  192 |        console.log(d3.select('#svg_group'))
> 193 |        svg
      | ^  194 |        .append("g")
  195 |        .datum(dataSeries)
  196 |            .call(chartitself);    
View compiled
LinePlot.componentDidMount
src/d3charts/LinePlot.js:43
  40 |        console.log('body', d3.select('body'))
  41 |        console.log(d3.select('#small-multiples'))
  42 |        console.log(d3.select('svg'))
> 43 |        this.plot_d3fc_x(construct_d3_input(parsed_data['rest_dict']['x']))
     | ^  44 |    }
  45 | 
  46 |    //pass in the len 600 array
View compiled
▶ 16 stack frames were collapsed.
(anonymous function)
src/App.js:132
  129 |   })
  130 | })
  131 | .then(() => {
> 132 |   this.setState({
      | ^  133 |     route: "display/charts"
  134 |   })
  135 |   console.log('route set to display/charts')```
...