D3：リニアスケールにダイナミックドメインを与える

Question

注：我々はまだD3のV3を使用しているので、v4のものは、私はそれを利用した2つの別々のチャートを描画しようとしている:(

助けにはなりませんこれは、すべての一つの小さな事....

私は現在にdata1.lengthを使用していますを除いて、以下のコードで美しく働いているのparamとしてデータを渡す。

ながら、モジュール化されたファッションのコード、 012を計算するxScaleの。私はそれを動的に設定することができるように、そこにパラメータ（例えばdataSource）を渡したいと思います。

あなたがソリューションをコーディングしたい場合はここで便利な小さなJSFiddleです：https://jsfiddle.net/bengrunfeld/8zpd79yp/

TIA

var data1 = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9]; 
var data2 = [9, 5, 2, 8, 3, 1, 7, 4, 2, 1, 9, 0, 3]; 

var width = 800; 
var height = 400; 

var graph = d3.select(".graph"); 

var container = graph.append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .style("padding", "10px") 
     .classed("container", true); 

var xScale = d3.scale.linear() 
    .domain([0, data1.length]) 
    .range([0, width]); 

var yScale = d3.scale.linear() 
    .domain([0, 10]) 
    .range([height, 0]); 

var line = d3.svg.line() 
    .x(function (d, i) { 
    return xScale(i); 
    }) 
    .y(function(d) { 
    return yScale(d); 
    }) 

function drawChart(dataSource) { 
    var chart = graph.select(".container") 
    .append("g") 
    .append("path") 
     .attr("d", line(dataSource)); 
} 

drawChart(data1); 
drawChart(data2); 

Answer 1

このようなxScaleは、サンセリフドメインを定義します。

var xScale = d3.scale.linear() 
    .range([0, width]); 

この

は、だから今、あなたが呼び出すとき

function drawChart(dataSource) { 
     xScale.domain([0, dataSource.length]);   
     var chart = graph.select(".container") 
     .append("g") 
     .append("path") 
      .attr("d", line(dataSource)); 
    } 

ダイナミックのXScaleドメインを設定します：xScaleはの

drawChart(data1); 
    drawChart(data2); 

ドメインが動的に設定されます。

作業コードhere