Question

我使用下面的代码在d3中创建一个带有线性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，

＆＃34; 8pwc＆＃34;，13.654,12.643,10.593,8,124，.... 9.900，

＆＃34; 9pwc＆＃34;，4.364,1.004,3.576,0.032，.... 5.512，

＆＃34; 2yrs＆＃34;，65.345,53.278,33.001,68.844，.... 54.544，

...

谢谢！

Answer 1

在这种特殊情况下，你必须使用point scale，这是一种序数尺度：

点标度是带标度的变体，带宽固定为零。点标度通常用于具有序数或分类维度的散点图。

点刻度将允许您将分类（定性）变量映射到连续数字输出。

因此，您的比例应为：

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

其域名应使用map：

定义

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

以下是工作代码：https://plnkr.co/edit/2nOLP5fEIHbs2U8OQB2y?p=preview

带有序数x轴的多线图

1 个答案: