origin 堆叠时如何在一个图中画多条曲线

Posted 2023-05-15

origin堆叠时一张图只能有一条曲线，如何一张图中画出多条曲线

利用Layer Content可以将多组曲线添加到同一个图中即可。

绘制好一张图后，会在图形框的左上角看到一个灰色的带有数字的小方块，这个就是图层的标记，图层1用数字1表示，图层2用数字2 表示，等等，用鼠标右origin堆叠时如何在一个图中画多条曲线。

origin bai本2017 pro ，校核堆叠顺序的方法是，右键单击graph窗口左上角的图层1653标志，在版弹出的对话框中左权键单击push backward，此时当前的layer就被置于最底层了。例子中layer2的红色线，被置于layer1 中红色蓝色线的后边了。

扩展资料：

Origin是一个具有电子数据表前端的图形化用户界面软件。与常用的电子制表软件不同，如Excel。Origin的工作表是以列为对象的，每一列具有相应的属性，例如名称，数量单位，以及其他用户自定义标识。

Origin以列计算式取代数据单元计算式进行计算。Origin可使用自身的脚本语言（LabTalk）去控制软件，该语言可使用Origin C进行扩展。Origin C是内置的基于C/C++的编译语言。

值得注意的是，Origin可以作为一个COM服务器，通过VB.NET,C#,LabVIEW等程序进行调用。

参考资料来源：百度百科-origin

参考技术A 利用Layer Content可以将多组曲线添加到同一个图中。

绘制好一张图后，你会在图形框的左上角看到一个灰色的带有数字的小方块，这个就是图层的标记，图层1用数字1表示，图层2用数字2 表示，等等（如果只有一个图层，那么就只有数字1）。
用鼠标右键点击这个带有数字的灰色小方块，在弹出的菜单中选择 Layer Content。
在新弹出的对话框中，可以看到左侧是在数据表Worksheet中的所有数据，右侧框中是你绘图用到的数据。点击左侧框中的数据，然后点击两个框中间的 》 箭头，就可以将数据添加到右侧框中，然后点击OK就行了。本回答被提问者采纳

如何在 d3 折线图中显示多条线？

【中文标题】如何在 d3 折线图中显示多条线？

【英文标题】：How to show multiple lines in a d3 line graph?

【发布时间】：2020-12-23 23:22:24

【问题描述】：

我希望在 d3 折线图中绘制多条线，并使用动画过渡每条线。这是一个工作示例，但一次显示 1 行。

https://www.d3-graph-gallery.com/graph/line_change_data.html

我正在尝试扩展它以同时显示多行。然后当点击 Dataset 2 按钮时，它会显示一组新的线条，并转换每一个线条。我的尝试是here

// Create 2 datasets
var data1 = [
  [
      ser1: 0.3,
      ser2: 4
    ,
    
      ser1: 2,
      ser2: 16
    ,
    
      ser1: 3,
      ser2: 8
    
  ],
  [
      ser1: 1,
      ser2: 7
    ,
    
      ser1: 4,
      ser2: 1
    ,
    
      ser1: 6,
      ser2: 8
    
  ]
];

var data2 = [
  [
      ser1: 4,
      ser2: 7
    ,
    
      ser1: 2,
      ser2: 5
    ,
    
      ser1: 2,
      ser2: 3
    
  ],
  [
      ser1: 1,
      ser2: 10
    ,
    
      ser1: 5,
      ser2: 8
    ,
    
      ser1: 7,
      ser2: 3
    
  ]
];

// set the dimensions and margins of the graph
var margin = 
    top: 10,
    right: 30,
    bottom: 30,
    left: 50
  ,
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

// Initialise a X axis:
var x = d3.scaleLinear().range([0, width]);
var xAxis = d3.axisBottom().scale(x);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .attr("class", "myXaxis")

// Initialize an Y axis
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y);
svg.append("g")
  .attr("class", "myYaxis")

// Create a function that takes a dataset as input and update the plot:
function update(data) 

  // Create the X axis:
  x.domain([0, d3.max(data, function(d) 
    return d3.max(d, function(d) 
      return d.ser1;
    );
  )]);
  svg.selectAll(".myXaxis").transition()
    .duration(3000)
    .call(xAxis);

  // create the Y axis
  y.domain([0, d3.max(data, function(d) 
    return d3.max(d, function(d) 
      return d.ser2;
    );
  )]);
  svg.selectAll(".myYaxis")
    .transition()
    .duration(3000)
    .call(yAxis);

  data.forEach(function(data, i) 

    // Create a update selection: bind to the new data
    var u = svg.selectAll(`.lineTest$i`)
      .data([data], function(d) 
        return d.ser1
      );

    // Update the line
    u
      .enter()
      .append("path")
      .attr("class", `.lineTest$i`)
      .merge(u)
      .transition()
      .duration(3000)
      .attr("d", d3.line()
        .x(function(d) 
          return x(d.ser1);
        )
        .y(function(d) 
          return y(d.ser2);
        ))
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 2.5);

  );


// At the beginning, I run the update function on the first dataset:
update(data1);

<script src="https://d3js.org/d3.v5.min.js"></script>

<!-- Add 2 buttons -->
<button onclick="update(data1)">Dataset 1</button>
<button onclick="update(data2)">Dataset 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

但问题是，当我单击数据集 2 按钮时，它会绘制新线，旧线仍然显示，并且它们之间没有过渡。

有人知道这里出了什么问题吗？

谢谢

【问题讨论】：

我认为这是你想要的工作：jsfiddle.net/kqjcobah。不过有几件事：数据连接将负责递归，因此不需要forEach。设置班级时，不要输入句点 - 仅在选择课程时输入句点。我也将 line 函数移到了一个变量中。希望有帮助！

【参考方案1】：

几点说明：

正如@Ryan Morton 所指出的，只需将整组行传递给 d3，它会处理其余部分。不需要forEach； 您使用了attr('class', '.lineTest')，但这给了它一个以点开头的类。这使得无法使用d3.select('.lineTest') 进行选择。删除点修复了该问题； 由于您的键函数选择d.ser1，但d 是一个对象数组，ser1 未定义。我将 key 函数更新为只使用索引。

// Create 2 datasets
var data1 = [
  [
      ser1: 0.3,
      ser2: 4
    ,
    
      ser1: 2,
      ser2: 16
    ,
    
      ser1: 3,
      ser2: 8
    
  ],
  [
      ser1: 1,
      ser2: 7
    ,
    
      ser1: 4,
      ser2: 1
    ,
    
      ser1: 6,
      ser2: 8
    
  ]
];

var data2 = [
  [
      ser1: 4,
      ser2: 7
    ,
    
      ser1: 2,
      ser2: 5
    ,
    
      ser1: 2,
      ser2: 3
    
  ],
  [
      ser1: 1,
      ser2: 10
    ,
    
      ser1: 5,
      ser2: 8
    ,
    
      ser1: 7,
      ser2: 3
    
  ]
];

// set the dimensions and margins of the graph
var margin = 
    top: 10,
    right: 30,
    bottom: 30,
    left: 50
  ,
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

// Initialise a X axis:
var x = d3.scaleLinear().range([0, width]);
var xAxis = d3.axisBottom().scale(x);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .attr("class", "myXaxis")

// Initialize an Y axis
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y);
svg.append("g")
  .attr("class", "myYaxis")

// Create a function that takes a dataset as input and update the plot:
function update(data) 

  // Create the X axis:
  x.domain([0, d3.max(data, function(d) 
    return d3.max(d, function(d) 
      return d.ser1;
    );
  )]);
  svg.selectAll(".myXaxis").transition()
    .duration(3000)
    .call(xAxis);

  // create the Y axis
  y.domain([0, d3.max(data, function(d) 
    return d3.max(d, function(d) 
      return d.ser2;
    );
  )]);
  svg.selectAll(".myYaxis")
    .transition()
    .duration(3000)
    .call(yAxis);

  // Create a update selection: bind to the new data
  var lines = svg.selectAll(`.lineTest`)
    .data(data, function(d, i) 
      return i;
    );

  lines.exit()
    .remove();

  // Update the line
  lines.enter()
    .append("path")
    .attr("class", "lineTest")
    .merge(lines)
    .transition()
    .duration(3000)
    .attr("d", d3.line()
      .x(function(d) 
        return x(d.ser1);
      )
      .y(function(d) 
        return y(d.ser2);
      ))
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2.5);


// At the beginning, I run the update function on the first dataset:
update(data1);

<script src="https://d3js.org/d3.v5.min.js"></script>

<!-- Add 2 buttons -->
<button onclick="update(data1)">Dataset 1</button>
<button onclick="update(data2)">Dataset 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>