d3.js 中使用 d3.chart.js 的折线图答案

【问题标题】：Line charts in d3.js using d3.chart.jsd3.js 中使用 d3.chart.js 的折线图
【发布时间】：2014-01-10 12:01:55
【问题描述】：

我想将d3.chart() 用于我已经编写的图表。我找到了d3.chart() 的示例，用于circle 和barcharts，但不是line charts。我的图表是折线图，我需要在d3.charts()中使用以下代码

svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

但是尝试这样使用时遇到问题

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="d3.chart.min.js"></script>

 </head>
 <body>
 <div id="vis"></div>
<script type="text/javascript">


d3.chart("linechart", {

  initialize: function() {
    // create a base scale we will use later.
   var chart = this;
    chart.w = chart.base.attr('width') || 200;
    chart.h = chart.base.attr('height') || 150;
    chart.w = +chart.w;
    chart.h = +chart.h;

   chart.x = d3.scale.linear()
      .range([0, chart.w]);

  chart.y = d3.scale.linear()
      .range([chart.h,0]);

  chart.base.classed('line', true);

  this.areas = {};
      chart.areas.lines = chart.base.append('g')
              .classed('lines', true)
              .attr('width', chart.w)
              .attr('height', chart.h)

       chart.line = d3.svg.line()
                  .x(function(d) { return chart.x(d.x);})   
                  .y(function(d) { return chart.y(d.y);});


    this.layer("lines", chart.areas.lines, {
      dataBind: function(data) {
        // update the domain of the xScale since it depends on the data
           chart.y.domain([d3.min(data,function(d){return d.y}),d3.max(data,function(d){return d.y})])
            chart.x.domain(d3.extent(data, function(d) { return d.x; }));

        // return a data bound selection for the passed in data.
                                    return this.append("path")
                                              .datum(data)
                                              .attr("d", chart.line)
                                              .attr('stroke','#1ABC9C')
                                              .attr('stroke-width','2')
                                              .attr('fill','none');
      },
      insert: function() {

        return null;

      },

    });
  },

  // configures the width of the chart.
  // when called without arguments, returns the
  // current width.
  width: function(newWidth) {
    if (arguments.length === 0) {
      return this.w;
    }
    this.w = newWidth;
    return this;
  },

  // configures the height of the chart.
  // when called without arguments, returns the
  // current height.
  height: function(newHeight) {
    if (arguments.length === 0) {
      return this.h;
    }
    this.h = newHeight;
    return this;
  },

});

var data = [
{x: 0,y:190},
  {x: 1,y:10},{x: 2,y:40},{x: 3,y:90},
  {x: 4,y:30},{x: 5,y:20},{x: 6,y:10}
];

var chart1 = d3.select("#vis")
  .append("svg")
  .chart("linechart")
  .width(720)
  .height(320)

chart1.draw(data);
</script>
</body>
</html>

错误：

未捕获的错误：[d3.chart] 图层选择未正确绑定。

我也得到了线路和错误。

注意：从this link获取d3.chart.min.js 从this link获取d3.v3.min.js

更新：我从@LarsKotthoff 的答案中得到了答案，但图像有所不同。检查此链接 Before apply D3 和 After apply D3。

【问题讨论】：

您能否发布一个完整的工作示例来演示该问题？
我已经更新了我的问题，你能再看看吗？

标签： javascript charts d3.js

【解决方案1】：

您似乎混淆了insert 和dataBind 操作——在前者中，您应该追加新元素，而后者只绑定数据。通过以下修改，您的代码对我来说可以正常工作。

dataBind: function(data) {
    // update the domain of the xScale since it depends on the data
       chart.y.domain([d3.min(data,function(d){return d.y}),d3.max(data,function(d){return d.y})])
        chart.x.domain(d3.extent(data, function(d) { return d.x; }));

    // return a data bound selection for the passed in data.
    return this.selectAll("path").data([data]);
  },
 insert: function() {
    return this.append("path")
              .attr("d", chart.line)
              .attr('stroke','#1ABC9C')
              .attr('stroke-width','2')
              .attr('fill','none');

  }

请注意，这不适用于多行 - 为此，请将 .data([data]) 更改为 .data(data) 并使用嵌套数组，例如[[{x:0,y:0},...], [{x:1,y:1},...], ...].

【讨论】：

按照你说的我试过之后，线路并不顺畅，但它正在工作。检查这些链接Before apply D3 和After apply D3。
D3“之前”和“之后”是什么意思？这两个不是都用 D3 完成的吗？
你能告诉我为什么线路不顺畅
我有简单的 d3.js 而不是 d3.chart.min.js 的普通代码，当我使用 d3.chart.min.js 时，我得到了平滑的线条但没有
我猜你使用的 CSS 是不同的。