여러 줄 그래프 꼬리표 - D3.js

Question

Multi-Series Line Chart example을 복제하려고하는데 줄의 맨 뒤에 표시 할 수 없거나 전혀 표시되지 않습니다. 코드는 기본적으로 예제와 동일하지만 몇 단어가 변경되었습니다. 데이터 집합은 카운티 인구로 구성되어 있으며 목록의 맨 위에있는 가장 빠른 날짜와 목록의 맨 아래에있는 가장 최근 날짜로 구성됩니다.

누구나 내가 누락 된 것을 볼 수 있습니까 ??

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

var parseDate = d3.time.format("%Y%m%d").parse; 

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() 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.population); }); 

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.csv("historicalpopulationTest.csv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    }); 

    var counties = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, population: +d[name]}; 
     }) 
    }; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 

    y.domain([ 
    d3.min(counties, function(c) { return d3.min(c.values, function(v) { return v.population; }); }), 
    d3.max(counties, function(c) { return d3.max(c.values, function(v) { return v.population; }); }) 
    ]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("x", width) 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Year"); 

    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") 
     .text("Population"); 

    var county = svg.selectAll(".county") 
     .data(counties) 
    .enter().append("g") 
     .attr("class", "county"); 

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

    county.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.population) + ")"; }) 
     .attr("x", width) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name; }); 

}); 

그래프 내가 당신의 문제는 다음과 같은 코드라고 생각이

Answer 1

과 같은

county.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.population) + ")"; }) 
    .attr("x", width) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name; }); 

난 당신의 코드를 실행하지 않은,하지만 당신이처럼 보인다 텍스트를 줄 끝으로 옮긴 다음 x 위치를 추가 '너비'픽셀 수만큼 이동시킵니다.

.attr("x", width)으로 변경하십시오. attr("x", 3)