2017-04-01 13 views
2

次のコードを使用して、d3の直線的なx軸を持つ複数の折れ線グラフを作成しました。今私はx軸の順序を作りたいと思っていますが、これをどうやって行うのかわかりません。どんな助けも素晴らしいだろう!序数x軸のマルチライングラフ

コード:

<!DOCTYPE html> 
<html> 
    <body> 
    <center><h1>ZNF expression DFC</h1></center> 
    <meta charset="utf-8"> 
    <style> 

    .axis--x path { 
     display: none; 
    } 

    .line { 
     fill: none; 
     stroke: steelblue; 
     stroke-width: 3.0px; 
    } 

    div.tooltip { 
     position: absolute;  
     text-align: center;  
     width: 60px;   
     height: 18px;   
     padding: 2px;  
     font: 12px sans-serif;  
     background: lightsteelblue; 
     border: 0px;  
     border-radius: 8px;  
     pointer-events: none;  
    } 


    </style> 
    <svg width="1560" height="1000"></svg> 
    <script src="//d3js.org/d3.v4.min.js"></script> 
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 
    <script> 

    var svg = d3.select("svg"), 
     margin = {top: 20, right: 80, bottom: 30, left: 50}, 
     width = svg.attr("width") - margin.left - margin.right, 
     height = svg.attr("height") - margin.top - margin.bottom, 
     g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var x = d3.scaleLinear().range([0, width]), 
     y = d3.scaleLinear().range([height, 0]), 
     z = d3.scaleOrdinal(d3.schemeCategory20); 

    // Define the div for the tooltip 
    var div = d3.select("body").append("div") 
     .attr("class", "tooltip")  
     .style("opacity", 0); 

    var line = d3.line() 
     .x(function(d) { return x(d.Age); }) 
     .y(function(d) { return y(d.expression); }); 

    d3.csv("expression_ZNF_ages.csv", function(error, data) { 
     if (error) throw error; 

     var znfs = data.columns.slice(1).map(function(id) { 
     return { 
      id: id, 
      values: data.map(function(d) { 
      return {Age: d.Age, expression: d[id]}; 
      }) 
     }; 
     }); 

     x.domain([0, data.length]).range([0, width]); 
     y.domain([0, 40]).range([height,0]); 
     z.domain(znfs.map(function(c) { return c.id; })); 

     g.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)); 

     g.append("g") 
      .attr("class", "axis axis--y") 
      .call(d3.axisLeft(y)) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "0.71em") 
      .attr("fill", "#000") 
      .text("expression" ); 

     var city = g.selectAll(".city") 
     .data(znfs) 
     .enter().append("g") 
      .attr("class", "city"); 

     city.append("path") 
      .attr("class", "line") 
      .attr("d", function(d) { return line(d.values); }) 
      .style("stroke", function(d) { return z(d.id); }) 
      .on("mouseover", function(d) {  
       div.transition()  
        .duration(200)  
        .style("opacity", .9);  
       div .html(d.id) 
        .style("left", (d3.event.pageX) + "px") 
        .style("top", (d3.event.pageY - 28) + "px"); 
       })   
      .on("mouseout", function(d) { 
       div.transition()  
        .duration(500)  
        .style("opacity", 0); 
      }); 
    }); 

    </script> 
    </body> 
</html> 

私が作業するデータはcsvファイルで、次のようになります。

年齢、ZNF8、ZNF18、ZNF136、ZNF140 .... ZNF778、

"8pwc"、13.654、12.643、10.593、8124、... 9.900、

"9pwc"、4.364、1.004、3.576、0.032、5.512 ...、

"2yrs"、65.345、53.278、33.001、68.844、54.544···、

....

ありがとうございました!この特定のケースで

答えて

2

、あなたが順序尺度の一種である、point scaleを使用する必要があります。

ポイントスケールはゼロに固定された帯域幅を持つバンドスケールの変種です。ポイントスケールは、通常、序数またはカテゴリのディメンションを持つ散布図に使用されます。

ポイントスケールを使用すると、カテゴリ(定性的な)変数を連続した数値出力にマップできます。

このように、あなたの規模は次のようになります。

var x = d3.scalePoint().range([0, width]) 

とそのドメインがmapで定義する必要があります。https://plnkr.co/edit/2nOLP5fEIHbs2U8OQB2y?p=preview

+0

あなたの先生、値する:

x.domain(data.map(d=>d.Age)); 

ここでの作業コードがありますメダル。どうもありがとうございました! –

関連する問題