D3 다중 시리즈 선 그래프 누락 세 번째 줄

이것이 반복처럼 보이는 경우 사과드립니다. 비슷한 스레드를 많이 보았지만 아무도 정확한 문제를 해결하지 못하는 것 같습니다.D3 다중 시리즈 선 그래프 누락 세 번째 줄

클래스에 대해 다중 계열 선 차트를 작성해야합니다. 나는 자바 스크립트에 정통하지 않고 D3에 완전히 익숙하지 않기 때문에 가능한 한 최선을 다하고 있습니다. 이 예제로 시작했습니다 : http://bl.ocks.org/mbostock/3884955

저는 편집자에게 코드를 복사했습니다. 실제로 그 작업을 수행 한 모든 작업은 4 자리 연도 (작동하는 것 같습니다)의 이름을 바꿉니다. "city"및 "cities"변수를 "category"및 "categories"로 변경하고 Temperature 축을 "Percent"로 레이블을 지정합니다. 거의 모든 -이 많이 알고

<body> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script> 

var margin = {top: 20, right: 80, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

//Change date format to four digit year. 
var parseDate = d3.time.format("%Y").parse; 
//x and y axes 
var x = d3.time.scale() 
    .range([0, width]); 

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

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
//change from "basis" to "linear" 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    //changed d.temperature to d.percent 
    .y(function(d) { return y(d.percent); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    }); 
//changied variable "cities" to "categories" 
    var categories = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     //changed below to percent 
     return {date: d.date, percent: +d[name]}; 
     }) 
    }; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
//changed "cities" to "categories" 
    y.domain([ 
    //Temp to percent 
    d3.min(categories, function(c) { return d3.min(c.values, function(v) { return v.percent; }); }), 
    d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.percent; }); }) 
    ]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     //Changed Temperature to percent for label 
     .text("Percent (%)"); 
    //Changed "city" to "category" and "cities" to "categories" 
    var category = svg.selectAll(".category") 
     .data(categories) 
    .enter().append("g") 
     .attr("class", "category"); 

    category.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { return color(d.name); }); 

    category.append("text") 
     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
     .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.percent) + ")"; }) 
     .attr("x", 3) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name; }); 
}); 

</script>

여기 내 코드입니다. 나는 그 문제가 어디 있는지 전혀 모른다. 기꺼이 이것을 볼 사람이 있다면, 나는 그것을 대단히 감사 할 것입니다. 내 현재 그래프가 호스팅되는 곳으로 연결되는 링크는 다음과 같습니다. http://www.pitt.edu/~kac232/hmwrk1ptA_test.html

현재 한 가지 카테고리에 대한 행이 누락되어 있고 경로가 완벽하게 직선이며 Whigh가 내게 의미가 없습니다. 나는 그들이 적어도 조금 비틀 거리기를 기대할 것이다.

감사합니다.

출처

2014-09-13 kacmcgrath

자신을 걷어차지만 오류는 데이터의 제목에 있습니다. 당신은 표제를 반복했다 Bachelor's degree or more. 이름 중 하나를 변경하면 예상대로 작동합니다.

출처

2014-09-13 23:31:51 user1614080

줄의 울퉁불퉁 함이이 부분과 함께 변경됩니다 : .interpolate ("basis"). 아래쪽으로 가서 모양이 어떻게 다른지 확인하고 계산하십시오 : https://www.dashingd3js.com/svg-paths-and-d3js 또한 내가 생각하기에 디자인에 대한 작은 음식, 만약 내가 퍼센트와 함께 일한다면 , 나는 y.domain을 ([0, 100])으로 하드 코딩하고 싶다. 퍼센트가 있기 때문에 실제, 실제 최대 값과 최소값은 0과 100이며, 반드시 데이터의 범위는 아닙니다. 0에서 100까지의 실제 컨텍스트로 데이터를 표시 할 수 있습니다. – Maggie

고마워요! 정말 그 대답에 감사드립니다. – kacmcgrath

D3 다중 시리즈 선 그래프 누락 세 번째 줄

답변

관련 문제