具有順序x軸的多線圖

我使用下面的代碼在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，

「2歲」，65.345，53.278，33.001，68.844，.... 54.544，

....

謝謝！

來源

2017-04-01 Stijn Robben

在這個特定的情況下，必須使用一個point scale，其是一種類型的順序量表的：

點秤是帶秤的與固定到零帶寬的變體。點標度通常用於具有序號或分類維度的散點圖。

點標度將允許您將分類（定性）變量映射到連續的數字輸出。

因此，你的規模應該是：

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

而且其領域應該定義一個map：

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

這裏是工作代碼：https://plnkr.co/edit/2nOLP5fEIHbs2U8OQB2y?p=preview

來源

2017-04-01 13:59:43

你，先生，值得勳章。非常感謝你！ –

具有順序x軸的多線圖

回答

相關問題