시리즈 라벨

나는 유일한 차이점은 내가 두 세트 사이의 전환을 할 노력하고있어 여기에 예 http://bl.ocks.org/mbostock/3884955 시리즈 라벨

같은 멀티 시리즈 라인 차트를 할 노력하고있어 데이터의. 전이는 훌륭하게 작동하지만,이 예제의 경우처럼 시리즈 라벨을 각 라인에 맞추기 시작하는 방법을 알지 못합니다.

아무도 그것에 대해 갈 생각에 대해 가지고 있습니까? 내 코드는 위의 예제와 약간 다른 방식으로 설정되므로 엄격히 따라갈 수는 없습니다. 내가 할 때조차, 데이터 레이블은 여기

내 코드의 ... 통해 올 해달라고 :

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style>  
body { 
    font: 10px serif; 
}  
.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.x.axis path { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 

} 
    .line { 
    fill: none; 
    stroke-width: 1.5px; 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script> 

var width = 550; 
      var height = 600; 
      var padding=60; 

var parseDate = d3.time.format("%Y").parse; 
var x = d3.time.scale().range([padding, width-padding]); 
var y = d3.scale.linear().range([height-padding, padding]);   

var z = d3.scale.category10(); 

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

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height) 


//load CSV 
d3.csv("diverge-nonscaled1950.csv", function(error, data) { 

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


    //compute column names 
var seriesNames = d3.keys(data[0]).filter(function(d) { return d !== "date"; }) 
     .sort(); 

//this is dataset one: data is scaled to column name INdia 
     var series = seriesNames.map(function(series) { 
    return data.map(function(d) { 
     return {x: d.date, y: ((+d[series]/d.India)*100)}; 
    }); 

    }); 

//this is dataset two: data is scaled to column name China 
     var series1 = seriesNames.map(function(series1) { 
    return data.map(function(d) { 
     return {x: d.date, y: ((+d[series1]/d.China)*100)}; 
    }); 

    }); 


var line = d3.svg.line() 
    .interpolate("basis") 
    // .defined(function(d) { return d.country>0; }) 
    .x(function(d) { return x(d.x); }) 
    .y(function(d) { return y(d.y); }); 


//domains 
x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain([0,2300]); 
z.domain(seriesNames) 


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

    svg.append("g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + padding + ",0)") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("x",0-(height/2.5)) 
     .attr("y", -50) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .style("font-size",11) 
     .text("Relative per Capita Incomes");; 

//draw path 
svg.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line) 
    .attr("stroke",function(d, i) { return z(i); }) 

//first transition from dataset one to two 
d3.select("svg") 
       .on("click",file1); 

function file1(){ 
svg.selectAll(".line").data(series1) 
    .transition().duration(750) 
    .attr("d", line) 
    .attr("stroke",function(d, i) { return z(i); }) 

d3.select("svg") 
       .on("click",file2); 

    } 

//second transition back to one 
function file2(){ 
svg.selectAll(".line").data(series) 
    .transition().duration(750) 
    .attr("d", line) 
    .attr("stroke",function(d, i) { return z(i); }) 

d3.select("svg") 
       .on("click",file1); 


} 



}); 

</script> 
</body>

어떠한 도움을 아주 많이

감사합니다 ... AVIN

출처

2013-03-05 user2134537

나는에 문제가 있었다 이것도 얼마 전에. 게시 한 예제에서와 같이 d3의 selection.datum() 메서드를 사용해야합니다.이 메서드는 개별 요소에 대한 데이터를 방해합니다. 그런 다음 thing[thing.length - 1]을 사용하여 각 시리즈의 최종 데이터 요소를 선택하고 해당 점의 x 및 y 값을 사용하여 텍스트를 변형/변환합니다.

city.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.temperature) + ")"; 
    })

그런 다음 애니메이션이 같은으로 변환을 갱신의 문제입니다 : : 코드의 관련 부분은

city.selectAll('text').transition() 
    .attr("transform", function(d) { 
     return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; 
    })

또한 내가 얼마 전에 보인다 만든 a chart를 볼 수 있습니다 당신이하려고하는 것과 비슷해야합니다.

출처

2013-03-05 13:04:39 nsonnad

대단히 감사합니다. 당신의 차트는 내가하려고하는 것과 분명히 비슷합니다. 잘하면 그것을 적응할 수 ... – user2134537

시리즈 라벨

답변

관련 문제