D3.js v4（NOT v3）を使用した基本線グラフ

Question

D3.js v4の日付を使用しない折れ線グラフの例を見つけるのが苦労しています。

let xScale = d3.scaleOrdinal().domain(data.map(d => d.label)).range([0, width]); 
svg.append('g') // x axis 
    .attr('transform', `translate(${margin.left}, ${margin.top + height})`) 
    .call(d3.axisBottom(xScale)); // <-- ERROR HERE 

エラー：

Argument of type 'ScaleOrdinal<string, {}>' is not assignable to parameter of type 'AxisScale<string>'を私がやってみたときに、私は（活字体で）このエラーが出るようd3.scaleOrdinalを（）を使用して、X軸を作成します。

このデータで折れ線グラフを作成する方法上の任意の超基本的な例？：

[{label: 'A', value: 3}, {label: 'B', value: 4}, {label: 'C', value: 2}] 

感謝。 D3バージョン4.5と折れ線グラフのこの単純な例で

Answer 1

ルック - http://codepen.io/marcobiedermann/pen/GWGJvM

は、私はそれをフォークして、データの作り直し - http://codepen.io/levvsha/pen/gWbXdm私はTHX、探していたまさに

const defaults = { 
    width : 500, 
    height: 370, 
    margin: { 
    top : 15, 
    right : 5, 
    bottom: 35, 
    left : 60 
    }, 
    axis: true, 
    axisPadding: 5, 
    xTicks: 3, 
    yTicks: 3, 
    lineCurve: d3.curveLinear 
}; 

class LineChart { 

    constructor(element, options) { 
    Object.assign(this, defaults, options); 

    this.element = element; 
    this.init(); 
    } 

    init() { 
    const { margin } = this; 
    const [ innerWidth, innerHeight ] = this.dimensions(); 

    const svg = this.svg = d3.select(this.element) 
     .append('svg') 
     .attr('width', this.width) 
     .attr('height', this.height) 
     .append('g') 
     .attr('transform', `translate(${margin.left}, ${margin.top})`) 

    const scaleX = this.scaleX = d3.scaleOrdinal() 
     .range([0, innerWidth/2, innerWidth]); 

    const scaleY = this.scaleY = d3.scaleLinear() 
     .range([innerHeight, 0]); 

    const xAxis = this.xAxis = d3.axisBottom(scaleX) 
     .ticks(3) 
     .tickValues(['A', 'B', 'C']) 
     .tickPadding(8); 

    const yAxis = this.yAxis = d3.axisLeft(scaleY) 
     .ticks(this.yTicks) 
     .tickPadding(8); 

    svg 
     .append('g') 
     .attr('class', 'chart__axis chart__axis--x') 
     .attr('transform', `translate(0, ${innerHeight + this.axisPadding})`) 
     .call(xAxis); 

    svg 
     .append('g') 
     .attr('class', 'chart__axis chart__axis--y') 
     .attr('transform', `translate(${-this.axisPadding}, 0)`) 
     .call(yAxis); 

    svg 
     .append('path') 
     .attr('class', 'chart__line') 

    this.line = d3.line() 
     .curve(this.lineCurve) 
     .x(data => scaleX(data.label)) 
     .y(data => scaleY(data.value)); 
    } 

    dimensions() { 
    const { margin } = this; 

    return [ 
     this.width - margin.left - margin.right, 
     this.height - margin.top - margin.bottom 
    ]; 
    } 

    renderAxis(data, options) { 
    let { svg } = this; 

    svg = options.animate ? svg.transition() : svg; 

    svg 
     .select('.chart__axis--x') 
     .call(this.xAxis); 

    svg 
     .select('.chart__axis--y') 
     .call(this.yAxis); 
    } 

    renderLine(data, options) { 
    this.svg 
     .select('.chart__line') 
     .data([data]) 
     .transition() 
     .attr('d', this.line); 
    } 

    render(data, options = {}) { 
    this.scaleX.domain(data.map(data => data.label)); 
    this.scaleY.domain(d3.extent(data, data => data.value)); 

    if (this.axis) { 
     this.renderAxis(data, options); 
    } 

    this.renderLine(data, options); 
    } 
} 

const lineChart = new LineChart('.js-line-chart'); 

lineChart.render([{label: 'A', value: 3}, {label: 'B', value: 4}, {label: 'C', value: 2}]);