使用d3.chart.js的d3.js中的折線圖

我想爲我已寫入的圖表使用d3.chart()。我發現的例子爲circle和barcharts，但不是line charts。我的圖是折線圖，我需要在d3.charts()使用d3.chart.js的d3.js中的折線圖

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>

錯誤使用方法：

Uncaught Error: [d3.chart] Layer selection not properly bound.

我有GET線和錯誤也是如此。

注：獲取從this link 從this link

更新獲取d3.v3.min.js：我從@LarsKotthoff答案的答案，但在圖像有不同。檢查這個鏈接Before apply D3和After apply D3。

來源

2014-01-10 user3002180

你可以發佈一個完整的工作示例，演示問題嗎？ –

我已經更新了我的問題，你能再看一次嗎？ – user3002180

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

來源

2014-01-10 14:03:59

我按照你的說法嘗試之後，線條並不平滑，但它正在工作。檢查這些鏈接[在申請D3之前]（https://s3-ap-southeast-1.amazonaws.com/uploads-ap.hipchat.com/29784/201183/Ed2OIA4JwaO6lig/upload.png）和[申請D3之後]（ https://s3-ap-southeast-1.amazonaws.com/uploads-ap.hipchat.com/29784/201183/hCkNgswzmIV6DOQ/upload.png）。 – user3002180

「D3」之前和之後的含義是什麼？這些都不是使用D3完成的嗎？ –

你能告訴我爲什麼行不光滑 – user3002180

使用d3.chart.js的d3.js中的折線圖

回答

相關問題