使用d3.chart.js创建d3.js中的折线图

Question

使用d3.chart.js创建d3.js中的折线图

3

我想在我已经编写的图表中使用d3.chart()。我找到了circle和barcharts的d3.chart()示例，但没有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] 图层选择未正确绑定。

我已经得到了行和错误信息。

注意: 从此链接获取d3.chart.min.js，从此链接获取d3.v3.min.js

更新: 我从@LarsKotthoff的回答中得到了答案，但图像有所不同。请查看这些链接：D3应用之前和D3应用之后。

- user3002180

你能否发布一个完整的工作示例来演示问题吗？ - Lars Kotthoff

我已经更新了我的问题，你能再看一下吗？ - user3002180

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

看起来你混淆了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},...], ...]。