Wie verwendet man die Zeitskala von D3 in React (Vanille) mit unregelmäßiger Datenstruktur?

Question

Mein Ziel ist es, eine mehrzeilige Grafik zu erstellen (Diagramm der Beträge eines bestimmten Verbrechens in einem bestimmten Wahlbezirk im Laufe der Zeit). Die y-Achse ist die Anzahl der Verbrechen, die x-Achse ist das Datum (eine Woche) und jede Linie steht für eine Verbrechensart.

Die Daten ist ein Array von Objekten und wurde von Datum für einen Kreis und sortiert bereits gefiltert:

[ 
    { 
    count: "4", 
    date: "2015-09-23", 
    district: 12, 
    to_timestamp: "2015-09-24T00:00:00.000Z", 
    type: "MOTOR VEHICLE THEFT" 
    }, 
    { 
    count: "13", 
    date: "2015-09-23", 
    district: 12, 
    to_timestamp: "2015-09-24T00:00:00.000Z", 
    type: "BURGLARY" 
    }, 
    ... 
    { 
    count: "3", 
    date: "2016-03-23", 
    district: 12, 
    to_timestamp: "2016-03-24T00:00:00.000Z", 
    type: "BURGLARY" 
    } 
] 

Meine Komponenten sind wie folgt reagieren:

const Line = React.createClass({ 

    propTypes: { 
    path:   React.PropTypes.string.isRequired, 
    stroke:  React.PropTypes.string, 
    fill:   React.PropTypes.string, 
    strokeWidth: React.PropTypes.number 
    }, 

    getDefaultProps() { 
    return { 
     stroke:  'blue', 
     fill:   'none', 
     strokeWidth: 3 
    }; 
    }, 

    render() { 
    let { path, stroke, fill, strokeWidth } = this.props; 
    return (
     <path 
     d={path} 
     fill={fill} 
     stroke={stroke} 
     strokeWidth={strokeWidth} 
     /> 
    ); 
    } 

}); 

const DataSeries = React.createClass({ 

    propTypes: { 
    colors:    React.PropTypes.func, 
    data:    React.PropTypes.array, 
    interpolationType: React.PropTypes.string, 
    xScale:    React.PropTypes.func, 
    yScale:    React.PropTypes.func 
    }, 

    getDefaultProps() { 
    return { 
     data:    [], 
     interpolationType: 'basis', 
     colors:    d3.scale.category10() 
    }; 
    }, 

    render() { 
    let { data, colors, xScale, yScale, interpolationType } = this.props; 

    let line = d3.svg.line() 
     .interpolate(interpolationType) 
     .x((d) => { return xScale(d.to_timestamp); }) 
     .y((d) => { return yScale(d.count); }); 

    let dataGroup = d3.nest() 
     .key(function(d) { 
     return d.type; 
     }) 
     .entries(data); 

    let lines = dataGroup.map((series, id) => { 
     return (
     <Line 
      path={line(series.values)} 
      stroke={colors(id)} 
      key={id} 
      /> 
    ); 
    }); 

    return (
     <g> 
     <g>{lines}</g> 
     </g> 
    ); 
    } 

}); 

const LineChart = React.createClass({ 

    propTypes: { 
    width: React.PropTypes.number, 
    height: React.PropTypes.number, 
    data: React.PropTypes.array.isRequired 
    }, 

    getDefaultProps(){ 
    return { 
     width: 600, 
     height: 300 
    } 
    }, 

    render() { 
    let { width, height, data } = this.props; 

    let xScale = d3.time.scale() 
        .domain([new Date('2015-09-24T00:00:00.000Z'), new Date('2016-03-24T00:00:00.000Z')]) 
        .range([0, width]); 

    let yScale = d3.scale.linear() 
        .domain([d3.min(data, function(d) { 
         return d.count; 
         }), d3.max(data, function(d) { 
         return d.count; 
         })]) 
        .range([height, 10]); 

    console.log(data); 

    return (
     <svg width={width} height={height}> 
      <DataSeries 
      xScale={xScale} 
      yScale={yScale} 
      data={data} 
      width={width} 
      height={height} 
      /> 
     </svg> 
    ); 
    } 

}); 

Ich glaube, das Problem ist, mit xScale und yScale Variablen auf der LineChart Komponente. Um zu beginnen, habe ich das erste und das letzte Datum fest programmiert, anstatt x.min() und y.min() zu verwenden, aber keine Weise funktioniert.

Ein zusätzliches Problem ist, dass zu einem bestimmten Datum möglicherweise nicht unbedingt ein Datenpunkt für ein bestimmtes Verbrechen vorliegt. Das heißt, es gibt keine Datenpunkte, die explizit count: 0 registrieren. Es Fehler Ich erhalte ist:

Error: <path> attribute d: Expected number, "MNaN,191.25LNaN,1…".

Als Referenz Ich verfolge diese beiden Führungen: http://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js--cms-22935 http://blog.bigbinary.com/2016/02/04/using-d3-js-with-react-js.html

Answer 1

Zeitskala Datum Objekte benötigt, während Sie ein String-Darstellungen sind die Bereitstellung von Termine.

Versuchen Sie folgendes:

let line = d3.svg.line() 
    .interpolate(interpolationType) 
    .x((d) => { return xScale(new Date(d.to_timestamp)); }) 
    .y((d) => { return yScale(d.count); }); 

Oder besser transoform Ihre Daten:

data.forEach(d => d.to_timestamp = new Date(d.to_timestamp));