d3.chart.js를 사용하는 d3.js의 꺾은 선형 차트

이미 작성한 차트에는 d3.chart()을 사용하고 싶습니다. circle 및 barcharts에 대한 d3.chart()의 예를 발견했지만 line charts에는 해당하지 않습니다. 내가 가진d3.chart.js를 사용하는 d3.js의 꺾은 선형 차트

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

GET : 내 차트 내가 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>

오류처럼 사용할 때 문제에 직면하고, 라인 차트입니다 줄과 오류도.

참고 : 나는 @LarsKotthoff 응답에서 대답을 얻었다하지만, 이미지에 다른있다 :this link 에서 d3.chart.min.js 업데이트 this link

에서 d3.v3.min.js를 가져옵니다. 이 링크를 확인하십시오 Before apply D3 및 After apply D3.

출처

2014-01-10 user3002180

문제를 보여주는 완전한 작동 예제를 게시 할 수 있습니까? –

내 질문을 업데이트했습니다. 다시 볼 수 있습니까? – user3002180

insert과 dataBind 작업을 혼동하는 것처럼 보입니다. 이전에는 새 요소를 추가해야하지만 후자는 데이터 만 바인딩합니다. 아래 수정을 통해 코드가 제대로 작동합니다. .data(data)에 .data([data])을 변경하고, 예를 들어, 중첩 된 배열을 사용, 그렇게하기 -이 여러 줄을 위해 작동하지 않습니다

는

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'); 

    }

주 [[{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의 꺾은 선형 차트

답변

관련 문제