我在这里找到了一个用D3.JS制作的精美烛台：
https://bl.ocks.org/anilnairxyz/raw/a51393d7c51342abe8d4e3f4cbab7ae1/
软件包的模块在这里：
https://gist.github.com/anilnairxyz/a51393d7c51342abe8d4e3f4cbab7ae1

出于我的目的，我想将下部的条形图更改为折线图。因此，我在main.js中的两个现有函数下面添加了一个函数：

function displayCS() {
    var chart       = cschart().Bheight(460);
    d3.select("#chart1").call(chart);
    var chart       = barchart().mname("volume").margin(320).MValue("TURNOVER");
    d3.select("#chart1").datum(genData).call(chart);
    var chart       = linechart().mname("comshort").margin(400).MValue("LINE");
    d3.select("#chart1").datum(genData).call(chart);

我还在脚本中添加了一个csline.js。到目前为止，我只更改了该软件包现有csbars.js中的几行。这是新的csline.js：

function linechart() {

  var margin = {top: 400,right: 30,bottom: 10,left: 5 },width = 1000,height = 60,mname = "mline1";

  var MValue = "LInes";

  function linerender(selection) {
    selection.each(function(data) {

      var x = d3.scale.ordinal()
          .rangeBands([0,width]);

      var y = d3.scale.linear()
          .rangeRound([height,0]);

      var xAxis = d3.svg.axis()
          .scale(x)
          .tickFormat(d3.time.format(TFormat[TIntervals[TPeriod]]));

      var yAxis = d3.svg.axis()
          .scale(y)
          .ticks(Math.floor(height/50));

      var svg = d3.select(this).select("svg")
         .append("g")
            .attr("transform","translate(" + margin.left + "," + margin.top + ")");

      x.domain(data.map(function(d) { return d.TIMESTAMP; }));
      y.domain([0,d3.max(data,function(d) { return d[MValue]; })]).nice();

      var xtickdelta   = Math.ceil(60/(width/data.length))
      xAxis.tickValues(x.domain().filter(function(d,i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));

      svg.append("g")
          .attr("class","axis yaxis")
          .attr("transform","translate(" + width + ",0)")
          .call(yAxis.orient("right").tickFormat("").tickSize(0));

      var barwidth    = x.rangeBand();
      var fillwidth   = (Math.floor(barwidth*0.7)/2)*2+1;  // Breite der Volumenbars
      var bardelta    = Math.round((barwidth-fillwidth)/2);

      var mbar = svg.selectAll("."+mname+"bar")
          .data([data])
        .enter().append("g")
          .attr("class",mname+"bar");

      mbar.selectAll("rect")
          .data(function(d) { return d; })
        .enter().append("rect")
          .attr("class",mname+"fill")
          .attr("x",function(d) { return x(d.TIMESTAMP) + bardelta; })
          .attr("y",function(d) { return y(d[MValue]); })
          .attr("class",function(d,i) { return mname+i; })
          .attr("height",function(d) { return y(0) - y(d[MValue]); })
          .attr("width",fillwidth);
    });
  }
  barrender.mname = function(value) {
            if (!arguments.length) return mname;
            mname = value;
            return barrender;
        };

  barrender.margin = function(value) {
            if (!arguments.length) return margin.top;
            margin.top = value;
            return barrender;
        };

  barrender.MValue = function(value) {
            if (!arguments.length) return MValue;
            MValue = value;
            return barrender;
        };

return linerender;
} 

如何制作折线图而不是条形图？数据存储在一个csv文件中，并应显示在模块的最下部。